如何将 HTML 作为文本插入答案

【问题标题】：How to insert HTML as Text如何将 HTML 作为文本插入
【发布时间】：2021-12-08 20:52:13
【问题描述】：

我希望 HTML，例如 <p>，以纯文本形式显示，而不是被浏览器解释为实际标记。

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

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

所以也有像 &gt; 和 &lt; 这样的东西，它们可以工作，但我找不到任何可以从中转义和取消转义的 JavaScript 函数。

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

【问题讨论】：

我个人使用已弃用但有效的标签XMP，如下所示：document.getElementById('someDiv').innerHTML='<xm'+'p><h1>Here is some <i>HTML</i></h1></xmp>'

【解决方案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 ) );

【讨论】：

【解决方案2】：

Prototype 使用的函数看起来不错：

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;');
}

【讨论】：

【解决方案3】：

这是createTextNode方法的工作

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

【讨论】：

【解决方案4】：

我建议使用html的pre标签

你可以使用this link转换你的

例如，如果你复制

<p>Hi </p>

它会给你转换后的代码...

&lt;p&gt;Hi &lt;/p&gt;

只需将上面的代码复制并粘贴到 pre 中，它就可以正常工作...

【讨论】：

【解决方案5】：

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

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

标签不会被格式化。您也可以使用\n 换行和更多代码（\t、\u2623...）。如果您还想使用固定大小的字符，您可以使用简单的<pre> 标签。

【讨论】：