背景
在
uniApp项目中，后端返回了编码内容，打印的时候可以看到有反斜杠存在。方法一，使用替换的方式把反斜杠去掉，失败；方法二，使用JavaScript解码器decodeURIComponent方法，失败；最后使用创建标签的方式获取内容进行了数据渲染。
代码
function htmlDecode(el) {
let temp = document.createElement('div'),
output = undefined;
temp.innerHTML = el;
output = temp.innerText || temp.textContent;
temp = null;
return output;
}
let tagText = "<p>资讯<span style=\"color: rgb(37, 36, 36); font-family: 微软雅黑, \" microsoft=\"\" font-size:=\"\" text-align:=\"\" background-color:=\"\">内容</span></p>";
console.log('打印后没有斜杠: ', tagText);
// <p>资讯<span style="color: rgb(37, 36, 36); font-family: 微软雅黑, " microsoft="" font-size:="" text-align:="" background-color:="">内容</span></p>
console.log('获取处理后的标签元素内容: ', htmlDecode(tagText));
// 资讯内容
效果图
decodeURIComponent
w3school
decodeURIComponent()函数对URI组件进行解码。
请使用encodeURIComponent()函数对URI组件进行编码。
MDN
decodeURIComponent()方法用于解码由encodeURIComponent方法或者其他类似方法编码的部分统一资源标识符(URI)。
textContent
w3school
textContent属性设置或返回指定节点的文本内容，以及它的所有后代。
如果您设置了textContent属性，会删除所有子节点，并被替换为包含给定字符串的一个单独的文本节点。
有时，此属性可用于取代nodeValue属性，但是请记住此属性同时会返回所有子节点的文本。
MDN
Node接口的
textContent属性表示一个节点及其后代的文本内容。
textContent和HTMLElement.innerText容易混淆，但这两个属性在重要方面有不同之处 。
// 设置值
document.querySelector('#ids').textContent = 'null';
// 获取值
console.log(document.querySelector('#ids').textContent);
innerText
w3school
innerText属性设置或返回元素的文本内容。
设置innerText属性时，所有子节点都将被删除并仅由一个新文本节点替换。
MDN
HTMLElement接口的
innerText属性表示一个节点及其后代所渲染文本的内容。
作为一个getter，它近似于用户用光标突出该元素的内容，然后将其复制到剪贴板上所得到的文本。作为一个setter，这将用给定的值替换该元素的子元素，并将任何换行符转换为<br>元素。
innerText很容易与Node.textContent混淆，但这两个属性间实际上有很重要的区别。大体来说，innerText知道文本的渲染外观，而textContent不知道。
// 设置值
document.querySelector('#ids').innerText = 'null';
// 获取值
console.log(document.querySelector('#ids').innerText);
createElement
MDN
在HTML文档中，
Document.createElement方法用于创建一个由标签名称tagName指定的HTML元素。如果用户代理无法识别tagName，则会生成一个未知HTML元素HTMLUnknownElement。
w3school
createElement方法创建元素节点。
document
菜鸟教程
当浏览器载入
HTML文档, 它就会成为Document对象。
Document对象是HTML文档的根节点。
Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。
Document对象是Window对象的一部分，可通过window.document属性对其进行访问。
MDN
Document接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM树(en-US)。
DOM树包含了像<body>、<table>这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的URL，如何在文档中创建一个新的元素这样的问题。
EventTarget <= Node <= Document
Document接口描述了任何类型的文档的通用属性与方法。根据不同的文档类型(例如HTML、XML(en-US)、SVG，……)，还能使用更多API。使用"text/html"作为内容类型(content type)的HTML文档，还实现了HTMLDocument接口，而XML和SVG文档则(额外)实现了XMLDocument接口。