如何在 javascript 中转义 html 标签？答案

【问题标题】：How do I escape html tags in javascript?如何在 javascript 中转义 html 标签？
【发布时间】：2017-05-18 15:47:58
【问题描述】：

所以这是我的简化代码：

TestHTML.html

<html>
<script src = "TestJs.js"></script>
<body>
<a onclick="var content = 'one<br>two<br>three' ; showContent(content);">Click here</a>
</body>
</html>

TestJs.js

function showContent(content){

var popup = open("", "PopUp", "width=300,height=200");
var pTag = popup.document.createElement("p");
pTag.innerHTML = content;
popup.document.body.appendChild(pTag);

};

这里我的要求是每当我点击页面上的参考链接（名为Click here）时，一个弹出窗口应该打开并显示通过onclick 发送的内容。上面的代码工作正常，我在表单中得到弹出结果

one
two 
three

但是当我尝试将尖括号作为文本时出现问题

<a onclick="var content = '<one><br>two<br>three' ; showContent(content);">Click here</a>

我在表格中得到了上述代码的结果

two
three

即尖括号中的文本被转义。

我知道尖括号是 html 实体，我需要转义它们。我尝试为发送 ASCII，即 &lt; 和 &gt; 到 onclick 就像

<a onclick="var content = '&lt;one&gt;<br>&lt;two&gt;<br>&lt;three&gt;' ; showContent(content);">Click here</a>

但文本在传递给 javascript 函数时会转换为其原始形式，随后会在弹出窗口中跳过（即空白弹出窗口）。

所以我的问题是：

创建html文档时如何在javascript中转义html标签？
ASCII 文本作为参数传递给 javascript 函数时如何自动转换回普通文本？

【问题讨论】：

你能创建一个 jsfiddle 来说明你的问题吗？ jsfiddle.net
快速修复：使用pTag.innerText 而不是pTag.innerHTML。
@GolezTrol — 否。这将防止 <br> 元素被解释为 HTML。
@RobinManoli — Stackoverflow 已支持 embedded live demos for years。如果您想要现场演示，建议第三方网站托管它并不是一个好主意。
内联事件处理程序是一个糟糕的选择......

标签： javascript html html-escape-characters

【解决方案1】：

看看你有什么。

角色&amp;lt;
需要用 HTML 表示（因为它被分配给innerHTML）所以&amp;lt; 必须写成&amp;lt;
但它嵌入在 HTML 属性中，当 HTML 解析器在 DOM 中构造属性值时，它将被解释为 HTML。 &amp; 在 HTML 中有特殊的含义，所以 &amp; 必须表示为 &amp;

所以&amp;lt;

【讨论】：

成功了！！！非常感谢！！！但是还是不明白为什么 <前面有 & 时得到特殊处理
如果它前面有&amp;，那么它不是前面有&amp;。
不...我的意思是为什么我们必须添加'&'
因为这是您在 HTML 中表示字符引用的方式，而字符引用是您如何使用具有特殊含义的字符（如“标签开头”）

【解决方案2】：

用一个倒置的条来避开它们。 \

<a onclick="var content = '\<one\>\<br\>two\<br\>three' ; showContent(content);">Click here</a>

测试一下。

【讨论】：

没有。 \ 是 JavaScript 字符串的转义字符，但 < 和 > 在 JavaScript 字符串文字中没有特殊含义。问题是文本正在通过两个 HTML 解析器运行。转义需要为 HTML 完成，而不是 JS。