我想弄清楚如何在 JS/HTML 中使用转义字符,但我不知道该怎么做。我看过使用 .innerHTML
的示例,但我不明白如何使用。有人可以用简单的术语解释一下吗?
最佳答案
如果您将内容添加为原始文本(例如,作为文本节点的值),然后查询 .innerHTML
在容器中,您会得到转义后的 HTML,因为如果您要设置 .innerHTML
,它必须看起来像这样:
var d = document.createElement('span');
var t = document.createTextNode("<b>Hello World</b>");
d.appendChild(t);
console.log(d.innerHTML); // logs <b>Hello World</b>
这就是 .innerHTML
的方式机制行为。
根据MDN documentation , 唯一受影响的字符是 <
, >
, 和 &
.有时使用 HTML 实体对其他字符进行编码很有用。我认为最常见的情况是您想在 HTML 属性中使用引号。
使用浏览器 DOM 行为的替代方法是使用您自己的 JavaScript 函数。这是 doT template library 中使用的代码的(略有修改的)版本:
function encodeHTMLSource() {
var encodeHTMLRules = {
"&": "&", "<": "<", ">": ">", '"': '"', "'": ''', "/": '/'
},
matchHTML = /&(?!#?\w+;)|<|>|"|'|\//g;
return function() {
return this ? this.replace(matchHTML, function(m) {
return encodeHTMLRules[m] || m;
}) : this;
};
}
String.prototype.encodeHTML = encodeHTMLSource();
此函数旨在添加到 String 原型(prototype)中,有些人可能会觉得不愉快(这似乎是最近的更改;我的旧版本不这样做)。这个想法是它使用一个闭包来保持从“顽皮”字符到它们的 HTML 实体等价物的映射,以及一个正则表达式来查找要转换的字符。完成上述操作后,您可以使用以下命令转义任何字符串:
var escaped = "<b>Hello World</b>".encodeHTML();
编写正则表达式可以避免对现有 HTML 实体进行重新编码。
关于javascript - 使用 .innerHTML 转义字符有什么好处?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21461091/