前言

  • 之前的文章，笔者讲述了渲染带有转义字符的字符串的办法
  • 传送门：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 数据。
  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...