javascript - 如何在 JavaScript 中编码字符串以在 HTML 中显示？

Question

可能重复：
如何转义 HTML

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

例如

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

现在safestring等于"<ohhlook&atme>"

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

Answer 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);

Answer 2

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

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

Answer 3

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

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

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

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

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

Answer 4

你需要逃脱<和&。逃跑>也无伤大雅：

function magic(input) {
    input = input.replace(/&/g, '&');
    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 实体。

Answer 5

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

因此，您的“魔术”代码是：

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