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

问题背景

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

p 标签显示出来了！

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

json 数据

问题分析

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

标签则另起一个段落。

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

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

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

感知和体验...

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

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