js反转义html转义字符

时间 2019-12-06

原文原文链接

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

可是某些富文本编辑器是基于不少UI框架的，每一个UI框架处理富文本编辑器的方式不同，就有可能出现各类奇葩状况
好比我今天遇到的状况html

数据库存储的数据不是
前端

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

而是
java

&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标签吧
dom

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

而后见证奇迹的时刻到了编辑器

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

原理就不说了，我的理解吧spa