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

2024-02-29 00:00:00 字符串 自定义 渲染

前言

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

如下案例更加通俗易懂:

应用DOMParser实现

复制粘贴演示即可





    
    
    Document



    
  • 新语法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…

相关文章