如何使浏览器不解析从 javascript 添加的新 HTML 代码

Question

我想使用 ajax 从我的服务器向我的网页添加一些文本，但这些文本包含一些 html 标记，并且浏览器倾向于解析该代码并呈现它。我不想要这种行为，我想在不解析 html 标签的情况下附加该文本。 有没有办法做到这一点？

Answer 1

您必须对返回的“HTML”进行编码。基本上你必须用<、>和&替换<、>和&。

如果您在服务器端使用 PHP，例如，您可以使用 htmlspecialchars() 执行此操作 - 其他语言可能有类似的功能或方法可用（cgi.escape 用于 python，HTML:Entities 用于 Perl，@987654324 @ 为 asp.net ...)。

如果你对看起来像这样的重新调整的字符串执行此操作

this is <strong>bold</strong> text

在您的浏览器中显示为

这是粗体文字

您的输出将更改为

this is <strong>bold</strong> text

将显示为

这是粗体文字

Answer 2

使用node.textContent 属性（IE 上的element.innerText文本 内容分配给元素。浏览器会将所有特殊字符编码到相应的 HTML 实体中：

var h1 = document.getElementsByTagName("h1")[0];
if (typeof h1.textContent != "undefined") {
    h1.textContent = "<b>Hello World</b>";
}
else if (typeof h1.innerText != "undefined") {
    h1.innerText = "<b>Hello World</b>";
}
alert(h1.innerHTML);​
// at this point, the h1 tag will "render" <b>Hello World</b>
// not the text Hello World in bold face
// inspecting the element will reveal that html tags, e.g. <b>
// were converted to &lt;b&gt;

demo

Answer 3

在浏览器端的javascript中：

function htmlEncode( str )  {
    str = str + "";
    var el = document.createElement("div");
    el.appendChild( document.createTextNode( str ) );
    return el.innerHTML;
}

htmlEncode( "<div></div>" );
//"&lt;div&gt;&lt;/div&gt;"