共计 2935 个字符，预计需要花费 8 分钟才能阅读完成。
前言
- 之前的文章，笔者讲述了渲染带有转义字符的字符串的办法
- 传送门：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…
正文完
发表至： javascript
2024-02-29
