使用DOMParser或仿寫v-html自定義指令實現html標籤字串的解析渲染

水冗水孚發表於2024-02-29
HTML字串

前言

image.png

  • 我們最終渲染成如下樣子：

image.png

需求-渲染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>

image.png

使用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時，克隆節點、其屬性和後代（類似於遞迴克隆複製）

效果圖

image.png

思考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...

相關文章