如何在 JavaScript 中编码字符串以在 HTML 中显示？ [复制]答案

【问题标题】：How to encode a string in JavaScript for displaying in HTML? [duplicate]如何在 JavaScript 中编码字符串以在 HTML 中显示？ [复制]
【发布时间】：2017-11-21 17:58:42
【问题描述】：

可能重复：
How to escape HTML

如何在 JavaScript 中将字符串转换为 HTML？

例如

var unsafestring = "<oohlook&atme>";
var safestring = magic(unsafestring);

safestring 现在等于 "&lt;ohhlook&amp;atme&gt;"

我正在寻找magic(...)。我没有将 JQuery 用于 magic。

【问题讨论】：

你可以附加一个document.createTextNode(unsafestring);
@Derek 这使得不安全的字符串 url 是安全的，但不是 html 安全的。
我不认为这是重复的：建议的原件解决了一个更具体的问题，需要一个更复杂的解决方案。
最佳答案是使用Option 类的innerHTML Ref: How to escape HTML

标签： javascript html

【解决方案1】：

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

那么对于var unsafestring = "<oohlook&atme>";，您将使用htmlEntities(unsafestring);

【讨论】：

这适用于非常具体的符号。
引号只需要转义即可在属性中使用。
@gdoron 这就是重点，只需转义 5 个字符（与、小于、大于、单引号、双引号）。
不.. 如果您不需要在参数中使用转义字符串，则可以安全地使用任何引号...
@gdoron 示例与否，仍然需要 5 个字符来转义。

【解决方案2】：

不要为编码而烦恼。请改用文本节点。文本节点中的数据保证被视为文本。

document.body.appendChild(document.createTextNode("Your&funky<text>here"))

【讨论】：

+1 很好的一点，尽管从问题中不清楚 OP 是只需要一个文本节点还是需要将结果字符串与其他字符串结合起来。
太棒了！一种简单的编码方法:)

【解决方案3】：

如果您想使用库而不是自己动手：

最常用的方法是为此目的使用jQuery：

var safestring = $('<div>').text(unsafestring).html();

如果您想对所有 HTML 实体进行编码，则必须使用库或自己编写。

您可以使用比 jQuery 更紧凑的库，例如 HTML Encoder and Decode

【讨论】：

这需要 jQuery，它 a) 问题没有被标记并且 b) 不需要。
@j08691，是的，我注意到缺少的标签，它仍然没有说这不是最好的选择，因为他需要一个库，而最强大的 js 库也可以做到这一点。
同意@j08691，它可以工作，但这只是一个繁重的解决方法。为什么要投票？
@Derek 你成就了我的一天 :-)
@Christophe，虽然这是一条旧评论。当有人帮助他们时，人们会投票。

【解决方案4】：

您需要转义< 和&。转义> 也无妨：

function magic(input) {
    input = input.replace(/&/g, '&amp;');
    input = input.replace(/</g, '&lt;');
    input = input.replace(/>/g, '&gt;');
    return input;
}

或者你让 DOM 引擎为你做脏活（因为我很懒，所以使用 jQuery）：

function magic(input) {
    return $('<span>').text(input).html();
}

这样做是创建一个虚拟元素，将您的字符串分配为其 textContent（即，没有特定于 HTML 的字符具有副作用，因为它只是文本），然后您检索该元素的 HTML 内容- 这是文本，但在必要时会将特殊字符转换为 HTML 实体。

【讨论】：

我喜欢第二个带有 jQuery“hack”的“魔术”版本。爱。它。谢谢！
有谁知道两者在性能上有什么区别吗？ jquery 是不是慢了一个？

【解决方案5】：

唯一需要转义的字符是<。（> 在标签之外毫无意义）。

因此，您的“神奇”代码是：

safestring = unsafestring.replace(/</g,'&lt;');

【讨论】：

错误：你还需要转义&。
我想我已经习惯了允许用户使用字符实体，因为它们是无害的。
我认为这不是 OP 所要求的。 “如何在 JavaScript 中将字符串转换为 HTML？”不是，“如何在 JavaScript 中将这个字符串转换为 HTML？”他想要一个通用的解决方案。
我不认为允许输入导致无效标记是无害的。