问题背景
项目开发中，本想把从后台获取到的 meaningVaule 值填充到页面上，结果 html 标签并没有被处理掉，而是显示在页面上了。如图所示，html 标签显示在了浏览器中。
下图展示的是从后台获取的数据，含有meaningValue字段：
问题分析
现在想要的目标是：html 标签不要显示出来，而是应该去规范 html 文档的显示效果，比如遇见<p>标签则另起一个段落。
而实际上呢，浏览器端在进行DOM渲染时，把形如<、>这样的字符串，解析成了<、>，继而把<p> 解析为<p>这样的HTML标签。然后就直接把解析后的字符串直接显示在了页面中，不再进行 html标签语义分析。由此可以看出，浏览器端自己转义了 转移字符，这样的好处很明显，可以有效的避免代码注入攻击，提升网站的安全原因。
如此分析一番后，解决的方案也就水落石出了：在浏览器DOM渲染前，先把形如<、>这样的字符串解析成<、>，再把解析后的新的字符串（形如<p>感知和体验...</p>）进行DOM渲染操作，即可在终端页面上渲染出最终与其的结果。
正确的渲染结果如下图所示：
解决方案代码
所谓HTML编码，其实就是将字符转换为HTML实体，这是防止脚本注入攻击的重要手段之一。
下面的代码中给出了通用的转义与反转义含有HTML标签的字符串的方法。
/**
* 把转义后的字符串反转义成含有 html 标签的字符串。
* 示例：
* HTMLDecode("<p>什么是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打印？"); // "<p>什么是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实体 两个操作。
一. 以下情况将被保留：
- HTML实体（ASCII实体、符号实体和字符实体）的实体名或实体编号；
- 符号实体和字符实体对应的字符；
- 没有HTML实体与之对应的字符；
- HTML标签。(如
<img>)。
二. 以下情况将会执行字符转换为HTML实体：
- ASCII实体对应的字符（<、>、&、'和"）。
也就是说除了单独的 <、>、&、'和" 会被转换为实体名外，将原封不动地将值赋予给innerHTML属性。
取值操作：
取值操作，即直接获取innerHTML属性值。
innerText & textContent
由于innerText并非 W3C 标准属性，尤其是FireFox 45 之前的版本不支持innerText方法。因此一般情况下可以使用textContent来代替，但它两者是否就能完全等同呢？实际并非如此！
区别：取值时 innerText会把只会获取节点里面的文本信息，而innerHTML 会获取节点下面的所有标签。innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText
IE中的innerText是需要对innerHTML的值进行：
- HTML转义（等同于XML转义，对<、&等转义字符进行处理）；
- 经过HTML解释和CSS样式解释；
- 之后又剔除格式信息之后留下的纯文本。
而FF中的textContent没有2、3步，在经过了HTML转义之后直接剔除所有html标签后得到的纯文本。
总结：
一言以蔽之，这一部分主要涉及到浏览器的兼容性问题。主要思路有以下两个：
- 可以采用上面给出的
HTMLDecode()与HTMLDecode()方法，来进行 html 标签的转义与还原处理。 - 或者，采用
jQuery中的方法，来抹平掉不同浏览器之间的差异性。
可以参考一下：MDN 之 Node.textContent
