前言
- 之前的文章，笔者讲述了渲染带有转义字符的字符串的方法
- 传送门：https://segmentfault.com/a/1190000044471416
- 图示，就是渲染接口返回的这样的：
- 我们最终渲染成如下样子：
需求-渲染html字符串
- 现在接口返回的，不是上述类型的了，而是带标签乃至样式的，如下：
let str = '<b style=\"background-color: rgb(214, 239, 214);\">白日依山尽</b>'- 即我们需要把str字符串，渲染这样的html标签字符串，到页面上
- 最方便的方式，就是直接使用
v-html帮我们渲染 v-html='str'- 当然我们也可以自己仿写一个简单的
v-html
方案一：仿写v-html自定义指令 实现对应需求
主要是使用innerHTML属性字段
仿写自定义指令如下：
export default {
// 在绑定元素的插入钩子中进行相应的操作
inserted: function (el, binding) {
// 获取传入指令的值（即要渲染的HTML字符串）
const htmlStr = binding.value;
// 将HTML内容添加到元素内部
el.innerHTML = htmlStr;
},
// update钩子中更新变化时，修改内容
update: function (el, binding) {
// 当新值不等于旧值时，才更改内容
if (binding.oldValue !== binding.value) {
el.innerHTML = binding.value;
}
}
}示例网址：http://ashuai.work:8888/#/myhtml
github地址：https://github.com/shuirongshuifu/elementSrcCodeStudy
方案二： 使用DOMParser接口api 实现对应需求
什么是DOMParser，干啥的
官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser
DOMParser顾名思义，就是可以做dom解析相关的- 除了解析
html，还可以解析xml，svg等 - 比如，把
html标签字符串解析为html文档
如下案例更加通俗易懂：
<script>
let str = '<p><img style=\"width: 190px;\" src=\"http://ashuai.work/static/img/avantar.png\"><br></p>'
let parser = new DOMParser() // 生产dom解析器实例
let doc = parser.parseFromString(str, 'text/html') // 调用对应解析方法，将字符串解析为html文档
console.log(doc); // 查看解析后的文档
</script>
使用DOMParser实现
复制粘贴演示即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrap"></div>
<script>
// 富文本编辑器接口返回的字符串
let str = '<p><b style=\"background-color: rgb(214, 239, 214);\">白日依山尽</b></p><p><i style=\"background-color: rgb(214, 239, 214);\">黄河入海流</i></p><p><u style=\"background-color: rgb(214, 239, 214);\">欲穷千里目</u></p><p><strike style=\"background-color: rgb(214, 239, 214);\">更上一层楼</strike></p>'
let parser = new DOMParser() // 生产dom解析器实例
let doc = parser.parseFromString(str, 'text/html') // 调用对应方法，将字符串解析为html文档
let wrap = document.querySelector('.wrap') // 获取容器
// 获取body内的所有子节点
let bodyChildren = doc.body.childNodes;
// 遍历，一个个追加节点（以及子节点）
for (let i = 0; i < bodyChildren.length; i++) {
wrap.appendChild(bodyChildren[i].cloneNode(true));
}
</script>
</body>
</html>- 新语法api：
node.cloneNode(deep)- 默认deep为false，仅克隆节点及其属性
- 设置为true时，克隆节点、其属性和后代（类似于递归克隆复制）
效果图
思考innerHTML和DOMParser那个好
- 如果能够确保这个html标签字符串是安全的、没问题的，直接innerHTML是最为方便的
- 但是，DOMParser进行解析后，明显可以做更多的操作，更为灵活！
- 进一步而言
- 在网络爬虫脚本中，当抓取到HTML页面内容后，可以利用DOMParser解析这些内容，以便于提取特定的信息或进行数据清洗。
- 再一个，我们在开发浏览器拓展插件的时候，可能需要解析和操作页面中的XML或HTML数据，DOMParser可以帮助实现这一功能
- 除此之外，在离线断网情况下，DOMParser可以用来读取和解析这些html资源，进而构建应用程序所需的UI样式结构
所以，这样一看，明显是DOMParser更加强大！
- 此外，一些知名的npm包，也用到了DOMParser去解析和操作 HTML 或 XML 数据。
- cheerio：一个类似于 jQuery 的库，用于在服务器端解析和操作 HTML 数据。它通常用于爬虫、数据抓取和数据处理等场景中，可能会用到 DOMParser。地址：https://www.npmjs.com/package/cheerio
- xml2js：一个用于将 XML 数据转换为 JavaScript 对象的库。在处理 XML 数据时，xml2js 可能会使用 DOMParser 来解析 XML 数据。地址：https://www.npmjs.com/package/xml2js
- jsdom：一个在 Node.js 环境中模拟浏览器环境的库，用于在服务器端操作 DOM。jsdom 可能会使用 DOMParser 来解析 HTML 或 XML 数据。地址：https://www.npmjs.com/package/jsdom
- parse5：一个快速而鲁棒的 HTML 解析器，用于解析和操作 HTML 数据。parse5 可能会使用 DOMParser 来解析 HTML 数据。地址：https://www.npmjs.com/package/parse5
A good memory is better than a bad pen. Write it down...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。