Question

我正在使用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？

Answer 1

为了完成这项工作，您必须使用data-i18n为要翻译的元素的[html]属性添加前缀：

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

来源：i18next.jquery.js

Answer 2

您需要关闭转义：

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

Answer 3

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

如果date = '15 / 10/2020'，

为我工作，同时保留斜杠

Answer 4

来自documentation：

提示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__”将阻止转义，即使   选项设置如此。

您可以在初始化i18n.init({escapeInterpolation: true});上启用转义，或者将选项传递给t函数，如示例中所示。

Answer 5

对于任何试图在 React （例如使用react-i18-next）中执行此操作的人，请注意React 也会转义字符串！因此，我们必须告诉两者 i18n和React都不要转义字符串。

为告诉i18n跳过转义，我们使用{escapeValue: false}，如其他人所示。
要告诉React跳过转义，我们使用React的dangerouslySetInnerHTML属性。

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

该属性接受具有一个属性__html的对象。 React故意使其丑陋，以阻止其使用，因为不逃避可能很危险。

为了安全起见，不应在此元素内部使用原始用户输入。如果确实需要在此处显示用户输入，请确保对用户的字符串进行清理或转义，以使用户无法将原始<或>注入页面。

Answer 6

您可以在全局初始化期间关闭转义：

i18n.init({
  // ...
  interpolation: {
    escapeValue: false,
  }
});

Answer 7

请勿将HTML标签放入翻译中。无论如何，这是一个坏主意。 关注分离家伙们都会对此抱怨。

如果 react-i18next [https://react.i18next.com/latest/trans-component] [1]

，请使用<Trans>组件

这样做：

// Component.js

<Trans>Welcome, <strong>User!</strong>, here's your <strong>broom</strong></Trans>

以及相应的翻译文件：

// your locales/starwars_en.js file

translations: {
  "Welcome, <1>User!</1>, here's your <3>broom</3>": "Welcome, <1>young padawan!</1>, here's your <3>light saber</3>",
}

这些数字 <1> 和 <3> 会随机打击您，但请等待：

Trans.children = [
  'Welcome, ',                        // index 0
  '<strong>User!</strong>'            // index 1
  ', please don't be ',               // index 2
  '<strong>weak</strong>',            // index 3
  ' unread messages. ',               // index 4
]

此处有更多信息：https://stackoverflow.com/a/62563302/537648

Answer 8

我同时使用React和React Native。对于React应用程序解决方案有效。不适用于React Native。

反应
i18n.js

interpolation: {
      escapeValue: false   
    }

somefile.jsx

<div dangerouslySetInnerHTML={{__html: t('dropZone.description')}} />

反应原生
该解决方案无效，因为Text标记内不允许

。我试图将危险的SetInnerHTML添加到Text标记中，但随后看不到任何内容。

有人为React Native提供解决方案吗？

i18next翻译中的HTML标签

8 个答案: