如何将HTML作为文本插入

Question

我希望HTML标签比如<p>能够以纯文本形式显示，并且不被浏览器解释为实际的标签。

我知道JQuery有.html和.text方法，但在原始的JS中应该如何实现呢？

虽然有像encodeURIComponent这样的函数可以将<p>编码为%3Cp%3E，但如果我直接将其放入HTML中，它会被解释为%3Cp%3E。

因此，还有像>和<这样的东西，虽然它们有效，但我找不到任何JavaScript函数来转义和取消转义这些符号。

有没有一种正确的方式可以使用原始JavaScript将HTML显示为文本？

- foobar

---

我个人使用已弃用但仍可用的标签XMP，代码如下：document.getElementById('someDiv').innerHTML='<xm'+'p><h1>这里有一些<i>HTML</i></h1></xmp>'。 - mplungjan

Answer 1

不需要转义字符，只需使用createTextNode：

var text = document.createTextNode('<p>Stuff</p>');
document.body.appendChild(text);

在这里可以看到一个工作示例：http://jsfiddle.net/tZ3Xj/。

这正是jQuery的做法（jQuery 1.5.2的第43行）：

return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );

- David Tang

---

你知道为什么Prototype会这样做，如果这种（更好看的）技术可行的话？ - thirtydot

@thirtydot，Prototype在将文本插入DOM时是否使用转义，还是只是一个实用函数？我可以想象转义在其他地方也有其用途。 - David Tang

也许 createTextNode 会自己进行转义？不管怎样，那就是我需要的函数。谢谢。 - foobar

.innerText 会为你创建并附加文本节点。 - Frobozz

Answer 2

Prototype使用的函数看起来是个不错的开始： http://www.prototypejs.org/api/string/escapeHTML

function escapeHTML() {
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

更适合在Prototype之外使用的版本：

function escapeHTML(html) {
    return html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

- thirtydot

Answer 3

您可以在大多数DOM元素中使用innerText：

document.getElementById('some').innerText = "There can be <b> even HTML tags </b>";

标签将不会被格式化。您还可以使用\n进行换行以及更多的代码（\t，\u2623…）。如果您想要使用固定大小字符，可以使用易于使用的<pre>标签。

- AgainPsychoX

Answer 4

这是一个使用方法为 createTextNode 的任务。

var target div = document.getElementById('div1');
targetDiv.appendChild(document.createTextNode('<p>HelloWorld</p>'));

- Andrew Shepherd

Answer 5

我建议使用HTML的pre标签。

你可以将this link转换为链接。

例如，如果你复制

<p>Hi </p>

它会给你转换后的代码，如下所示...

<p>Hi </p>

只需将上面的代码复制并粘贴到预格式化文本中，它就能正常工作...

- Jitesh