javascript - 使用 .innerHTML 转义字符有什么好处？

Question

我想弄清楚如何在 JS/HTML 中使用转义字符，但我不知道该怎么做。我看过使用 .innerHTML 的示例，但我不明白如何使用。有人可以用简单的术语解释一下吗？

Answer 1

如果您将内容添加为原始文本(例如，作为文本节点的值)，然后查询 .innerHTML在容器中，您会得到转义后的 HTML，因为如果您要设置 .innerHTML，它必须看起来像这样:

var d = document.createElement('span');
var t = document.createTextNode("<b>Hello World</b>");
d.appendChild(t);
console.log(d.innerHTML); // logs &lt;b&gt;Hello World&lt;/b&gt;

这就是 .innerHTML 的方式机制行为。

根据MDN documentation , 唯一受影响的字符是 < , > , 和 & .有时使用 HTML 实体对其他字符进行编码很有用。我认为最常见的情况是您想在 HTML 属性中使用引号。

使用浏览器 DOM 行为的替代方法是使用您自己的 JavaScript 函数。这是 doT template library 中使用的代码的(略有修改的)版本:

    function encodeHTMLSource() {
      var encodeHTMLRules = { 
          "&": "&#38;", "<": "&#60;", ">": "&#62;", '"': '&#34;', "'": '&#39;', "/": '&#47;'
        },
        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 实体进行重新编码。