乐趣区

关于javascript:使用DOMParser或仿写vhtml自定义指令实现html标签字符串的解析渲染

jiezi

前言

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

退出移动版