如何将HTML作为文本插入

Question

我想要HTML，例如<p>，以纯文本形式显示show，而不是浏览器将其解释为实际标记。

我知道JQuery有.html和.text，但是如何在原始JS中完成？

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

所以还有像>和<这样的东西，它们可以工作，但我找不到任何逃脱的JavaScript函数。不受欢迎。

是否有正确的方法将HTML显示为带有原始JavaScript的文本？

Answer 1

没有必要逃避角色。只需使用createTextNode：

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

请在此处查看工作示例：http://jsfiddle.net/tZ3Xj/。

这正是jQuery如何做到的（line 43 of jQuery 1.5.2）：

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

Answer 2

Prototype使用的函数看起来是一个好的开始：

http://www.prototypejs.org/api/string/escapeHTML

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

更适合在原型外使用的版本：

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

Answer 3

我建议使用html的预标签

您可以转换使用this link

例如，如果你复制

<p>Hi </p>

它会将转换后的代码作为...

<p>Hi </p>

只需在pre中复制并粘贴上面的代码，它就能正常工作......

Answer 4

这是方法createTextNode

的工作

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

Answer 5

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

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

标签不会被格式化。您可以将\n用于新行和更多代码（\t，\u2623 ...）。如果您希望使用固定大小的字符，则可以使用简单的<pre>标记。