Good job! DOMParser

Paul Li
4 min readMar 6, 2024
Good job! DOMParser
Good job! DOMParser

Introduction

近日觀看 Chrome 新支援的 Web API 介紹中,意外看到了一個有趣的 Web API — DOMParser,名稱明確地訴說著它的作用,是的!web developers 可以透過它來對字串進行解析,進而轉換成 document,如此便可以透過再熟悉不過的 DOM 操作來進行 DOM tree 遍歷。

也就是說 web developers 再也不需撰寫複雜不好維護的 regular expression 了,大大提升了 code 的閱讀性。更令筆者感到驚豔的是 — 這個 Web API 支援度極高無比,可說是元老院等級的 API 了~因此可以放寬心、大膽的來使用它!

MDN > DOMParser, https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#browser_compatibility

How to use it ?

使用方法非常簡單,他只有一個 method — parseFromString,所以 new 完 DOMParser 後,便可以直接呼叫這個 method(呼叫的當下記得置入你希望轉出的 mimeType),便可以立即轉換成我們所需要的格式了~

如範例所述,我們成功地把字串們轉換成 XML、SVG 以及 HTML document 了。

目前支援了以下的 mimeType :

  • text/html
  • application/xml
  • application/xhtml+xml
  • image/svg+xml

此外,web developers 也可以透過它來知曉是否為 well-formed document。如下所示,當解析失敗時,可以在 document 中找到 <parsererror />這個 node,屆時便可以做出對應處理。

Use case

凡是需要將字串解析成 document 的 case 通通都可以使用 DOMParser 來進行相關操作與解析。例如:

  • 透過 API 拿到 stock XML 格式的 response,想分析特定欄位。
  • 需要取得頁面上 <svg /> 中 circle 的座標與半徑。
  • 檢查使用者輸入的 HTML code(ex: rich text editor)的外部連結使否隱含不合法的位址。
  • 解析使用者 paste or drop 的內容(DataTransfer)。

日前筆者剛好有開發 image uploader 的需求,該 component 就有支援 DnD(drag & drop)的功能,筆者希望如果使用者直接拖曳不同視窗的 web page 內容時,也可以正確的解析出這些內容裡頭的 image 外部資源位址。進而將這些圖片進行上傳。

以下為相關 code:

筆者先判斷 dataTransfer.types 是否隱含 text/html 這個 mimeType,接著再透過 DOMParser 進行解析與轉換,便可以透過 querySelectorAll 掃出當中隱含的所有 <img />,自然便可以取出所有的 image paths 了。

Conclusion

以上便是 DOMParser 的基本介紹與使用心得,對於 DOMParser 總有種相見恨晚的感覺,所以看文件的當下難掩心中愉悅的情愫,希望本篇能有效地幫助到大家,讓大夥們可以更輕易的入門 DOMParser。 #DOMParser

Reference

--

--

Paul Li

Paul is the lead programmer of the AMP project at Yahoo Taiwan and is always eager for modern web technologies. He is also focusing on UX for vivid user flow.