使用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实现

复制粘贴演示即可

• 新语法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 数据。

1. cheerio：一个相似于 jQuery 的库，用于在服务器端解析和操作 HTML 数据。它通常用于爬虫、数据抓取和数据处理等场景中，可能会用到 DOMParser。地址：https://www.npmjs.com/package/cheerio
2. xml2js：一个用于将 XML 数据转换为 JavaScript 对象的库。在解决 XML 数据时，xml2js 可能会应用 DOMParser 来解析 XML 数据。地址：https://www.npmjs.com/package/xml2js
3. jsdom：一个在 Node.js 环境中模仿浏览器环境的库，用于在服务器端操作 DOM。jsdom 可能会应用 DOMParser 来解析 HTML 或 XML 数据。地址：https://www.npmjs.com/package/jsdom
4. parse5：一个疾速而鲁棒的 HTML 解析器，用于解析和操作 HTML 数据。parse5 可能会应用 DOMParser 来解析 HTML 数据。地址：https://www.npmjs.com/package/parse5

A good memory is better than a bad pen. Write it down…