Web前端之JavaScript获取编码字符串的标签内容、转义字符、decodeURIComponent、createElement、textContent、innerText、document

焊码IoT

已于 2024-09-09 22:13:53 修改

阅读量952

点赞数 7

CC 4.0 BY-SA版权

分类专栏： Web前端 JavaScript 文章标签： javascript 前端 web web前端

于 2023-06-30 20:56:29 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/131483260

Web前端同时被 2 个专栏收录

388 篇文章

订阅专栏

JavaScript

234 篇文章

订阅专栏

背景

在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接口。