javascript i18next 翻译中的 HTML 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16038458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML tags in i18next translation
提问by
I'm using i18nextto power i18n for my weblog. It works great on text-only content, but when I try to translate content that includes HTML markup, it is displaying the raw markup when I translate the text.
我正在使用i18next为我的博客提供 i18n 的支持。它适用于纯文本内容，但是当我尝试翻译包含 HTML 标记的内容时，它会在我翻译文本时显示原始标记。
As an example, here is a snippet of the markup from a post that is not working as expected:
例如，以下是未按预期工作的帖子中的标记片段：
<div class="i18n" data-i18n="content.body">
In Medellín they have many different types of <i>jugos naturales</i> (fruit juice) ... <br />
<br />
...
</div>
The translation code looks like this:
翻译代码如下所示：
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();
});
When the translation is rendered, HTML tags are escaped and output as text:
当翻译被渲染时，HTML 标签被转义并作为文本输出：
En Medellín hay varios tipos diferentes de <i>jugos naturales</i>...<br /><br />
How do I get i18next to change the HTML of translated elements?
如何让 i18next 更改已翻译元素的 HTML？
采纳答案by
In order to make this work, you have to prefix the data-i18nattribute of the elements you want to translate with [html]:
为了完成这项工作，您必须在data-i18n要翻译的元素的属性前加上前缀[html]：
<div class="i18n" data-i18n="[html]content.body">
Source: i18next.jquery.js
回答by Dotevo
You need to turn off escaping:
您需要关闭转义：
i18n.t("key", { 'interpolation': {'escapeValue': false} })
i18n.t("key", { 'interpolation': {'escapeValue': false} })
回答by joeytwiddle
For anyone trying to do this in React(for example with react-i18-next), be aware that React alsoescapes the string! So we have to tell bothi18n and React not to escape the string.
对于任何尝试在React 中执行此操作的人（例如使用react-i18-next），请注意 React也会对字符串进行转义！因此，我们必须告诉既国际化，并发生反应，逃跑的字符串。
To tell i18n to skip escaping, we use
{escapeValue: false}as others have shown.To tell React to skip escaping, we use React's
dangerouslySetInnerHTMLattribute.
为了告诉 i18n 跳过转义，我们
{escapeValue: false}像其他人展示的那样使用。为了告诉 React 跳过转义，我们使用 React 的
dangerouslySetInnerHTML属性。
<div dangerouslySetInnerHTML={
{__html: t('foo', {interpolation: {escapeValue: false}})}
} />
That attribute accepts an object with one property __html. React intentionally made it ugly, to discourage its use, because not escaping can be dangerous.
该属性接受具有一个属性的对象__html。React 故意让它变得丑陋，以阻止它的使用，因为不转义可能是危险的。
For security, raw user input should not be used inside this element. If you do need to present user input here, be sure to sanitise or escape the user's string, so the user cannot inject raw <or >into the page.
为了安全起见，不应在此元素内使用原始用户输入。如果您确实需要在此处显示用户输入，请确保清理或转义用户的字符串，以便用户无法将原始<或>页面注入。
回答by garbo
i18n.t('key',{dateStr: date, interpolation: {escapeValue: false}})
work for me if date='15/10/2020', slashes kept as well
如果 date='15/10/2020' 对我有用，斜线也保留
回答by borisdiakur
From the documentation:
从文档：
Hint 3: Escaping:
// given resources { 'en-US': { translation: { key1: Not escaped __nameHTML__, key2: Escaped __name__ } } }; i18n.t("key2", { name: '', escapeInterpolation: true }); // -> Escaped <tag> i18n.t("key1", { name: '', escapeInterpolation: false }); // -> Not escaped <tag>Adding suffix 'HTML__' to your value will prevent the escaping even if option is set so.
You could turn on escaping on init
i18n.init({escapeInterpolation: true});or by passing in option to t function like in the sample.
提示 3：逃逸：
// given resources { 'en-US': { translation: { key1: Not escaped __nameHTML__, key2: Escaped __name__ } } }; i18n.t("key2", { name: '', escapeInterpolation: true }); // -> Escaped <tag> i18n.t("key1", { name: '', escapeInterpolation: false }); // -> Not escaped <tag>向您的值添加后缀 'HTML__' 将阻止转义，即使选项设置为如此。
您可以在 init 上打开转义，也可以
i18n.init({escapeInterpolation: true});像示例中一样将选项传递给 t 函数。
回答by Finesse
You can turn off the escaping during initialization globally:
您可以在全局初始化期间关闭转义：
i18n.init({
// ...
interpolation: {
escapeValue: false,
}
});
回答by Anniek van Dijk
I'm using both React and React Native. For the React app The solution works. Not for React Native.
我同时使用 React 和 React Native。对于 React 应用程序该解决方案有效。不适用于 React Native。
React
i18n.js
反应
i18n.js
interpolation: {
escapeValue: false
}
somefile.jsx
somefile.jsx
<div dangerouslySetInnerHTML={{__html: t('dropZone.description')}} />
React Native
This solution does not work because < div> is not allowed within a Text tag. I tried to add the dangerouslySetInnerHTML to the Text tag, but then nothing is visible.
React Native
此解决方案不起作用，因为 < div> 不允许在 Text 标签中。我试图将危险的SetInnerHTML 添加到文本标记，但随后什么也看不见。
Does someone have a solution for React Native?
有人有 React Native 的解决方案吗？
