Introduction
近日觀看 Chrome 新支援的 Web API 介紹中,意外看到了一個有趣的 Web API — DOMParser,名稱明確地訴說著它的作用,是的!web developers 可以透過它來對字串進行解析,進而轉換成 document,如此便可以透過再熟悉不過的 DOM 操作來進行 DOM tree 遍歷。
也就是說 web developers 再也不需撰寫複雜不好維護的 regular expression 了,大大提升了 code 的閱讀性。更令筆者感到驚豔的是 — 這個 Web API 支援度極高無比,可說是元老院等級的 API 了~因此可以放寬心、大膽的來使用它!
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