乐趣区

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

前言

  • 之前的文章,笔者讲述了渲染带有转义字符的字符串的办法
  • 传送门: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,还能够解析xmlsvg
  • 比方,把 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…

退出移动版