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 переведенных элементов?

26
i18next internationalization javascript

5 ответов

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

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

источник: i18next.на jQuery.js

35

вам нужно отключить escaping:

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

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

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

6

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

Подсказка 3: Побег:

// 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__' к вашему значению предотвратит экранирование, даже если опция установлена так.

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

5

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

чтобы сказать React, чтобы не избежать строки, мы должны использовать react's ugly dangerouslySetInnerHTML:

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

извините за это!

0