HTML 标签显示在页面上的Bug：标签的转义及反转义

问题背景

项目开发中，本想把从后台获取到的 meaningVaule 值填充到页面上，结果 html 标签并没有被处理掉，而是显示在页面上了。如图所示，html 标签显示在了浏览器中。

p 标签显示出来了！

下图展示的是从后台获取的数据，含有meaningValue字段：

json 数据

问题分析

现在想要的目标是：html 标签不要显示出来，而是应该去规范 html 文档的显示效果，比如遇见<p>标签则另起一个段落。

而实际上呢，浏览器端在进行DOM渲染时，把形如<、>这样的字符串，解析成了<、>，继而把<p> 解析为<p>这样的HTML标签。然后就直接把解析后的字符串直接显示在了页面中，不再进行 html标签语义分析。由此可以看出，浏览器端自己转义了 转移字符，这样的好处很明显，可以有效的避免代码注入攻击，提升网站的安全原因。

如此分析一番后，解决的方案也就水落石出了：在浏览器DOM渲染前，先把形如<、>这样的字符串解析成<、>，再把解析后的新的字符串（形如<p>感知和体验...</p>）进行DOM渲染操作，即可在终端页面上渲染出最终与其的结果。

正确的渲染结果如下图所示：

p 标签被正确的渲染出来

解决方案代码

所谓HTML编码，其实就是将字符转换为HTML实体，这是防止脚本注入攻击的重要手段之一。

下面的代码中给出了通用的转义与反转义含有HTML标签的字符串的方法。

/**
 * 把转义后的字符串反转义成含有 html 标签的字符串。
 * 示例：
 *      HTMLDecode("&lt;p&gt;什么是3D打印？");  // "<p>什么是3D打印？"
 * @param text
 */
const HTMLDecode = text => {
    let tmp = document.createElement('div');
    tmp.innerHTML = text;
    const output = tmp.innerText || tmp.textContent;
    tmp = null;
    return output;
}

/**
 * 转义含有 html 标签的字符串。
 * 示例：
 *      HTMLEncode("<p>什么是3D打印？");   // "&lt;p&gt;什么是3D打印？"
 * @param html
 */
const HTMLEncode = html => {
    let tmp = document.createElement('div');
    (tmp.textContent != null) ? (tmp.textContent = html) : (tmp.innerText = html);
    const output = tmp.innerHTML;
    tmp = null;
    return output;
}

对于本篇文章开头的问题，在渲染meaningVaule字符串前，调用一下HTMLDecode方法即可，如下：

const destStr = HTMLEncode(data.meaningValue);
// 再把`destStr`渲染到 DOM 中...

解读 innerHTML、innerText、textContent

innerHTML

由于innerText和textContent均为对innerHTML内容作不同的处理而成，因此我们需要先明确innerHTML属性的特点。

赋值操作：

赋值操作，即先对值的内容进行模式匹配，然后把处理后的值赋予给innerHTML属性。模式匹配结果将导致 保留 和 将字符转换为HTML实体 两个操作。

一. 以下情况将被保留：

1. HTML实体（ASCII实体、符号实体和字符实体）的实体名或实体编号；
2. 符号实体和字符实体对应的字符；
3. 没有HTML实体与之对应的字符；
4. HTML标签。(如<img>)。

二. 以下情况将会执行字符转换为HTML实体：

1. ASCII实体对应的字符（<、>、&、'和"）。

也就是说除了单独的 <、>、&、'和" 会被转换为实体名外，将原封不动地将值赋予给innerHTML属性。

取值操作：

取值操作，即直接获取innerHTML属性值。

innerText & textContent

由于innerText并非 W3C 标准属性，尤其是FireFox 45 之前的版本不支持innerText方法。因此一般情况下可以使用textContent来代替，但它两者是否就能完全等同呢？实际并非如此！

区别：取值时 innerText会把只会获取节点里面的文本信息，而innerHTML 会获取节点下面的所有标签。innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText
IE中的innerText是需要对innerHTML的值进行：

1. HTML转义（等同于XML转义，对<、&等转义字符进行处理）；
2. 经过HTML解释和CSS样式解释；
3. 之后又剔除格式信息之后留下的纯文本。

而FF中的textContent没有2、3步，在经过了HTML转义之后直接剔除所有html标签后得到的纯文本。

总结：

一言以蔽之，这一部分主要涉及到浏览器的兼容性问题。主要思路有以下两个：

1. 可以采用上面给出的 HTMLDecode() 与HTMLDecode()方法，来进行 html 标签的转义与还原处理。
2. 或者，采用 jQuery 中的方法，来抹平掉不同浏览器之间的差异性。

可以参考一下：MDN 之 Node.textContent