69

我正在为我的博客使用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？

4

9 回答 9

50

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

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

来源： i18next.jquery.js

于 2013-04-16T13:36:07.447 回答
27

您需要关闭转义：

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

于 2016-11-29T13:02:33.807 回答
24

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

  • 为了告诉 i18n 跳过转义，我们{escapeValue: false}像其他人所展示的那样使用。

  • 为了告诉 React 跳过转义，我们使用 React 的dangerouslySetInnerHTML属性。

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

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

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

于 2018-08-31T03:37:15.683 回答
8

不要将 HTML 标签放在翻译中。无论如何，这是一个坏主意。关注点分离的家伙都会对此发牢骚。

<Trans>如果react-i18next使用组件[https://react.i18next.com/latest/trans-component][1]

这样做：

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

于 2020-06-27T04:54:50.160 回答
7

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

date='15/10/2020'如果也保留斜线，则对我有用

于 2017-02-16T14:45:52.847 回答
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__' 将防止转义，即使选项已设置为如此。

您可以在 init 上打开转义，i18n.init({escapeInterpolation: true});或者像在示例中一样将选项传递给 t 函数。

于 2015-11-30T11:11:29.330 回答
2

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

i18n.init({
  // ...
  interpolation: {
    escapeValue: false,
  }
});
于 2020-01-31T06:06:02.780 回答
0

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

反应
i18n.js

interpolation: {
      escapeValue: false   
    }

一些文件.jsx 

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

React Native
此解决方案不起作用，因为在 Text 标记中不允许使用 <div>。我试图将 dangerouslySetInnerHTML 添加到 Text 标记中，但是什么都看不到。

有人有 React Native 的解决方案吗？

于 2019-11-29T17:37:47.377 回答
-1

ReactJS 中的解决方案：

初始组件：

...
<Typography>Hello <b>World</b><br />This is an <strong>example</strong></Typography>
...

将Interweave与react-i18next 结合使用

...
import { Markup } from "interweave"
...
<Typography><Markup content={t("paragraph")} /></Typography>
...

还有你的 en.json 文件：

{
 "paragraph": "Hello <b>World</b><br />This is an <strong>example</strong>"
}

es.json：

{
 "paragraph": "Hola <b>Mundo</b><br />Esto es un <strong>ejemplo</strong>"
}

更多信息：这里

于 2022-01-03T18:45:43.510 回答