js反转义html转义字符

浪尽此生 提交于 2019-12-21 17:35:42

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

在前端生涯当中,可能都会遇到有富文本编辑器情况

但是某些富文本编辑器是基于很多UI框架的,每个UI框架处理富文本编辑器的方式不一样,就有可能出现各种奇葩情况
比如我今天遇到的情况

数据库存储的数据不是
 

<div>111<span>222</span></div>

而是
 

&lt;div&gt;111&lt;span&gt;222&lt;/span&gt;&lt;/div&gt;

这样造成了获取数据之后输出到页面会显示出html标签,就算使用jq的html()方法也是没用的,因为获取的数据本就不是html标签,而是html转义字符

我在网上查了很多方法,都是非常麻烦的反转义,代码很多,而且需要各种配置,现在这个方法可以通用任何情况,非常简单
先声明一个变量,该变量存储从数据库获取到的转义字符串数据
 

var text = '&lt;div&gt;111&lt;span&gt;222&lt;/span&gt;&lt;/div&gt;'

然后再声明一个变量,改变量存储一个代码生成的标签,这里通用div标签吧
 

var dom = document.createElement('div');

然后见证奇迹的时刻到了

dom.innerHTML = text;
text = dom.innerText || dom.textContent;
dom = null;
console.log(text);// <div>111<span>222</span></div>

原理就不说了,个人理解吧

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!