html解决转义字符问题,HTML 标签显示在页面上的Bug：标签的转义及反转义

问题背景

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

p 标签显示出来了！

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

json 数据

问题分析

现在想要的目标是：html 标签不要显示出来，而是应该去规范 html 文档的显示效果，比如遇见

标签则另起一个段落。

而实际上呢，浏览器端在进行DOM渲染时，把形如<、>这样的字符串，解析成了，继而把<p> 解析为

这样的HTML标签。然后就直接把解析后的字符串直接显示在了页面中，不再进行 html标签语义分析。由此可以看出，浏览器端自己转义了 转移字符，这样的好处很明显，可以有效的避免代码注入攻击，提升网站的安全原因。

如此分析一番后，解决的方案也就水落石出了：在浏览器DOM渲染前，先把形如<、>这样的字符串解析成，再把解析后的新的字符串(形如

感知和体验...

)进行DOM渲染操作，即可在终端页面上渲染出最终与其的结果。

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

p 标签被正确的渲染出来

解决方案代码

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

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

/**

* 把转义后的字符串反转义成含有 html 标签的字符串。

* 示例：

* HTMLDecode("<p>什么是3D打印？"); // "

什么是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("

什么是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标签。(如)。

二. 以下情况将会执行字符转换为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 中的方法，来抹平掉不同浏览器之间的差异性。