Javascript i18next翻译中的HTML标记

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

---

如何获取i18next以更改已翻译元素的HTML？

为了实现此功能，必须在要翻译的元素的

data-i18n

属性前面加上前缀

[HTML]

：

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

来源：

来自：

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

//给定的资源
{           
‘en US’：{
翻译：{
键1：未转义\uuuuu name html\uuuuuuuuu，
键2：转义名称
} 
}
};
i18n.t（“key2”，{name:''，escapeInterpolation:true}）；//->转义标签
i18n.t（“key1”，{name:''，escapeInterpolation:false}）；//->未逃脱

在您的值中添加后缀“HTML\uuuu”将阻止转义，即使 选项设置为这样

您可以在init

i18n.init（{escapeInterpolation:
真}）或通过向t函数传递选项，如示例中所示

您需要关闭转义：

i18n.t（“键”，{'interpolation'：{'escapeValue'：false}）

如果date='15/10/2020'，为我工作，斜杠也会保留
供任何试图在React中执行此操作的人使用（例如使用
React-i18-next
），请注意React也会转义字符串！因此，我们必须告诉i18n并做出反应，不要逃逸字符串


为了告诉i18n跳过转义，我们使用
{escapeValue:false}
，正如其他人所示


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





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

为了安全起见，此元素中不应使用原始用户输入。如果您确实需要在此处使用不受信任的字符串，请确保对其进行清理或转义，以便用户无法将原始
注入页面。
我同时使用React和React Native。对于React应用程序，解决方案有效。不适合本地人

反应

i18n.js

somefile.jsx

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



本机反应

此解决方案不起作用，因为文本标记中不允许使用
。我试图将危险的LysetinerHTML添加到文本标记中，但是什么都看不见

是否有人有React Native的解决方案？
您可以在初始化期间全局关闭转义：

i18n.init({
// ...
插值：{
逃避价值：错，
}
});
不要将HTML标记放在翻译中。无论如何，这是个坏主意。分离关注点的家伙们会抱怨的

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

这样做：

//Component.js
欢迎，用户，这是你的扫帚

以及相应的翻译文件：

//您的地区/starwars\u en.js文件
翻译：{
“欢迎，用户！这是你的扫帚”：“欢迎，年轻学徒！这是你的光剑”，
}

这些数字将随机出现，但请等待：

Trans.children=[
'欢迎'，//索引0
“用户！”//索引1
'请不要是'，//索引2
“弱”，//索引3
“未读邮件”。，//索引4
]

更多信息：
但是html仍然被转义，我想知道你是否做了其他设置使html不被转义？@user212218我尝试了这个，但它对我不起作用。我正在使用一个普通HTML文件，并使用javascript中的i18n.load函数加载翻译JSON文件。我试图在页面的一个标题中使用HTML标记。JSON:
“abc”：“嗨，我正在尝试使用”
html:
我缺少什么？上面显示的是浏览器中的
[html]abc
正确的解决方案！我确实需要打一点。此示例可能会有帮助：（1）在js代码中：_error_date_invalid；（2）在i18n json中：“_error_date_invalid”：“此日期无效。
请确保日期介于明天和一年后的日期之间”。对于试图在React with React-i18-next中执行此操作的任何人，请注意React也会转义字符串！为了告诉React不要转义字符串，我们必须使用React丑陋的技术：
在使用任何用户输入时都要小心，因为潜在的XSS攻击。我只是想在翻译中使用HTML标记，因此我选择了
注意，这可能会导致出现意外的安全问题（即XSS），如果您正在应用程序中的某个位置呈现用户输入。@Fantaticd仅当您使用
innerHTML=…
这对React Native不安全时，您可以使用String.fromCharCode方法：const nonBreakingString=
My Custom String${String.fromCharCode（160）}5
我在这里缺少什么？似乎有了这个解决方案，您现在不得不在Component.js.Yep中使用硬编码的英语翻译。英语作为基础语言。在我们的案例中，这有点粗糙，但可以节省时间。
// 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>

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

interpolation: {
      escapeValue: false   
    }

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