web-dev-qa-db-fra.com

Balises HTML dans la traduction i18next

J'utilise i18next pour alimenter i18n pour mon blog. Cela fonctionne très bien sur le contenu texte uniquement, mais lorsque j'essaie de traduire du contenu qui inclut un balisage HTML, il affiche le balisage brut lorsque je traduis le texte.

À titre d'exemple, voici un extrait du balisage d'une publication qui ne fonctionne pas comme prévu:

<div class="i18n" data-i18n="content.body">
  In Medellín they have many different types of <i>jugos naturales</i>&nbsp;(fruit juice) ... <br />
  <br />
  ...
</div>

Le code de traduction ressemble à ceci:

var resources = {
  "en": ...,
  "es": {
    "translation": {
      "content": {
        "body": "En Medellín hay varios tipos diferentes de <i>jugos naturales</i> ... <br /><br /> ... "
      }
    }
  }
}

i18n.init({"resStore": resources}, function( t ) {
  $('.i18n').i18n();
});

Lorsque la traduction est rendue, les balises HTML sont échappées et sorties sous forme de texte:

En Medellín hay varios tipos diferentes de &lt;i&gt;jugos naturales&lt;/i&gt;...&lt;br /&gt;&lt;br /&gt;

Comment obtenir i18next pour changer le HTML des éléments traduits?

javascriptinternationalizationi18next
35
user212218

Pour que cela fonctionne, vous devez préfixer le data-i18n attribut des éléments que vous souhaitez traduire avec [html]:

<div class="i18n" data-i18n="[html]content.body">

Source: i18next.jquery.js

41
user212218

Vous devez désactiver l'échappement:

i18n.t("key", { 'interpolation': {'escapeValue': false} })

13
Dotevo
i18n.t('key',{dateStr: date, interpolation: {escapeValue: false}})

fonctionne pour moi si date = '15/10/2020 ', les barres obliques sont également conservées

6
garbo

De la documentation :

Astuce 3: Échapper:

// given resources
{           
  'en-US': { 
    translation: { 
      key1: Not escaped __nameHTML__,
      key2: Escaped __
    } 
  }
};

i18n.t("key2", { name: '', escapeInterpolation: true }); // -> Escaped &lt;tag&gt;
i18n.t("key1", { name: '', escapeInterpolation: false }); // -> Not escaped <tag>

L'ajout du suffixe 'HTML__' à votre valeur empêchera l'échappement même si l'option est définie ainsi.

Vous pouvez activer l'échappement sur init i18n.init({escapeInterpolation: true}); ou en passant l'option à la fonction t comme dans l'exemple.

6
borisdiakur

Pour quiconque essaie de le faire dans React (par exemple avec react-i18-next), sachez que React aussi échappe à la chaîne! Nous devons donc dire à les deux i18n et React de ne pas échapper à la chaîne.

  • Pour dire à i18n de sauter les échappements, nous utilisons {escapeValue: false} comme d'autres l'ont montré.

  • Pour dire React pour ignorer l'échappement, nous utilisons l'attribut dangerouslySetInnerHTML de React.

<div dangerouslySetInnerHTML={
    {__html: t('foo', {interpolation: {escapeValue: false}})}
} />

Cet attribut accepte un objet avec une propriété __html. React l'a rendu intentionnellement laid, pour décourager son utilisation, car ne pas s'échapper peut être dangereux.

Pour des raisons de sécurité, les entrées utilisateur brutes ne doivent pas être utilisées à l'intérieur de cet élément. Si vous devez présenter ici une entrée utilisateur, assurez-vous de purifier ou d'échapper la chaîne de l'utilisateur, afin que l'utilisateur ne puisse pas injecter de brut < ou > dans la page.

3
joeytwiddle