使用DOMParser或仿写vhtml自定义指令实现html标签字符串的解析渲染
前言
- 之前的文章，笔者讲述了渲染带有转义字符的字符串的办法
- 传送门：https://segmentfault.com/a/1190000044471416
- 图示，就是渲染接口返回的这样的：
- 咱们最终渲染成如下样子：
需要-渲染html字符串
- 当初接口返回的，不是上述类型的了，而是带标签乃至款式的，如下：
let str = '白日依山尽'- 即咱们须要把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文档
如下案例更加通俗易懂：
应用DOMParser实现
复制粘贴演示即可
Document
- 新语法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…