前言

之前的文章，笔者讲述了渲染带有转义字符的字符串的方法
传送门：juejin.cn/post/731203...
图示，就是渲染接口返回的这样的：

我们最终渲染成如下样子：

需求-渲染html字符串

现在接口返回的，不是上述类型的了，而是带标签乃至样式的，如下：
let str = '<b style=\"background-color: rgb(214, 239, 214);\">白日依山尽</b>'
即我们需要把str字符串，渲染这样的html标签字符串，到页面上
最方便的方式，就是直接使用v-html帮我们渲染
v-html='str'
当然我们也可以自己仿写一个简单的v-html

方案一：仿写v-html自定义指令实现对应需求

主要是使用innerHTML属性字段

仿写自定义指令如下：

js 复制代码

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;
        }
    }
}

示例网址：ashuai.work:8888/#/myhtml

github地址：github.com/shuirongshu...

方案二：使用DOMParser接口api 实现对应需求

什么是DOMParser，干啥的

官方文档：developer.mozilla.org/zh-CN/docs/...

DOMParser顾名思义，就是可以做dom解析相关的
除了解析html，还可以解析xml，svg等
比如，把html标签字符串解析为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实现

复制粘贴演示即可

html 复制代码

<!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。地址：www.npmjs.com/package/che...
xml2js ：一个用于将 XML 数据转换为 JavaScript 对象的库。在处理 XML 数据时，xml2js 可能会使用 DOMParser 来解析 XML 数据。地址：www.npmjs.com/package/xml...
jsdom ：一个在 Node.js 环境中模拟浏览器环境的库，用于在服务器端操作 DOM。jsdom 可能会使用 DOMParser 来解析 HTML 或 XML 数据。地址：www.npmjs.com/package/jsd...
parse5 ：一个快速而鲁棒的 HTML 解析器，用于解析和操作 HTML 数据。parse5 可能会使用 DOMParser 来解析 HTML 数据。地址：www.npmjs.com/package/par...

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

使用DOMParser或仿写v-html自定义指令实现html标签字符串的解析渲染

前言

需求-渲染html字符串

方案一：仿写v-html自定义指令 实现对应需求

方案二： 使用DOMParser接口api 实现对应需求

什么是DOMParser，干啥的

使用DOMParser实现

效果图

思考innerHTML和DOMParser那个好

方案一：仿写v-html自定义指令实现对应需求

方案二：使用DOMParser接口api 实现对应需求