HTML-теги в переводе i18next

Я использую i18next для включения i18n для своего веб-журнала. Он отлично работает с текстовым контентом, но когда я пытаюсь перевести контент, включающий разметку HTML, он отображает сырую разметку при переводе текста.

В качестве примера, здесь приведен фрагмент разметки из сообщения, которое не работает должным образом:

<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>

Код перевода выглядит следующим образом:

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();
});

Когда перевод выполняется, теги HTML экранируются и выводятся как текст:

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

Как мне получить i18next для изменения HTML переведенных элементов?

Ответы

Ответ 1

Чтобы выполнить эту работу, вы должны префикс атрибута data-i18n элементов, которые вы хотите перевести, с помощью [html]:

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

Источник: i18next.jquery.js

Ответ 2

Вам нужно отключить экранирование:

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

Ответ 3

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

работайте для меня, если дата = '15/10/2020 ', косые черты также сохранены

Ответ 4

В документации :

Подсказка 3: Escaping:

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

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

Добавление суффикса "HTML__" к вашему значению предотвратит утечку, даже если опция установлена ​​так.

Вы можете включить экранирование в init i18n.init({escapeInterpolation: true}); или передав в функцию t функцию, как в примере.

Ответ 5

Любой, кто пытается сделать это в React (например, с помощью react-i18-next), должен знать, что React также избегает строки! Таким образом, мы должны сказать и i18n, и React не избегать строки.

  • Чтобы сказать i18n пропустить {escapeValue: false}, мы используем {escapeValue: false} как показали другие.

  • Чтобы сказать React пропустить экранирование, мы используем атрибут React dangerouslySetInnerHTML.

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

Этот атрибут принимает объект с одним свойством __html. Реакция намеренно сделала это уродливым, чтобы препятствовать его использованию, потому что не убежать может быть опасно.

В целях безопасности необработанный пользовательский ввод не должен использоваться внутри этого элемента. Если вам необходимо представить здесь пользовательский ввод, обязательно очистите или экранируйте пользовательскую строку, чтобы пользователь не мог вставить raw < или > на страницу.