HTML清理器：線上移除屬性、腳本與雜亂內容
貼上雜亂的HTML，取得乾淨的無屬性骨架與結構JSON大綱，可移除腳本、樣式、註解、SVG、表單和任意自訂選擇器。
完全使用瀏覽器原生HTML解析器執行，不會上傳任何內容。適合內容擷取、爬蟲流程、CMS遷移，以及準備輸入LLM的HTML。
HTML清理器：線上移除屬性、腳本與雜亂內容
貼上雜亂的HTML，取得乾淨的無屬性骨架與結構JSON大綱，可移除腳本、樣式、註解、SVG、表單和任意自訂選擇器。
關於HTML清理器
從真實網站複製的HTML通常帶有大量負擔：框架類別名稱堆積、內嵌樣式、data-*屬性、追蹤腳本、SVG圖示、註解標記，以及層層只為單一用途的包裝div。當你真正需要的是內容結構——用於爬蟲流程、CMS遷移、差異比較，或在交給語言模型前精簡頁面——這些內容都是隱藏重點並浪費權杖的雜訊。
此工具使用瀏覽器自己的解析器（DOMParser）解析HTML，接著執行可設定的清理流程：移除所有屬性（可選擇保留連結上的href以保留連結圖）；刪除script、style、註解、SVG與表單節點；移除符合自訂CSS選擇器的元素（每行一個選擇器，適合導覽列或Cookie橫幅等網站特有介面）；清理剩餘的空標籤；還可移除只包含一個子元素且自身沒有文字的包裝器，折疊div巢狀。
工具會並排產生兩種輸出：清理後的HTML，以及剩餘結構的JSON大綱（tag、text、children、href），方便程式處理。大小標籤會顯示結果縮小多少——在典型現代頁面中，清理後的骨架通常比輸入小80-95%。所有操作都在瀏覽器分頁本機完成，HTML不會離開你的裝置。
HTML清理範例
各個選項對程式碼片段的作用。
| 輸入 | 輸出 | 說明 |
|---|---|---|
| ⟨div class="a b c" data-x="1"⟩⟨p style="color:red"⟩Hi⟨/p⟩⟨/div⟩ | ⟨div⟩⟨p⟩Hi⟨/p⟩⟨/div⟩ | 移除所有屬性；保留結構與文字。 |
| ⟨p⟩Text⟨script⟩evil()⟨/script⟩⟨/p⟩ | ⟨p⟩Text⟨/p⟩ | 完全移除script標籤。 |
| ⟨a class="btn" href="/docs"⟩Docs⟨/a⟩ | ⟨a href="/docs"⟩Docs⟨/a⟩ | 開啟「保留href」後，連結仍可使用。 |
| ⟨div⟩⟨div⟩⟨p⟩Deep⟨/p⟩⟨/div⟩⟨/div⟩ | ⟨p⟩Deep⟨/p⟩ | 「提升單一子元素包裝器」會折疊純巢狀結構。 |
HTML清理器使用方式
- 將HTML貼到輸入框。
- 勾選想要的清理選項；針對導覽列或廣告區塊等元素，可加入網站專用CSS選擇器（每行一個）。
- 點選「清理HTML」。
- 複製清理後的HTML；若要用程式處理，也可以複製JSON結構。
- 大小標籤會告訴你移除了多少雜亂內容。
HTML清理器常見問題
我的HTML會上傳到伺服器嗎？
不會。解析與清理完全在瀏覽器中使用原生DOMParser執行。頁面載入後即可離線使用。
自訂選擇器有什麼作用？
符合任一CSS選擇器的元素（每行一個）會在清理前被移除，例如「nav」、「#sidebar」或「div[class*=ads]」。無效選擇器會略過。
JSON輸出有什麼用途？
它是清理後結構的大綱——由包含tag、text、children及可選href的物件組成。適合爬蟲、測試，或不重新解析HTML就將結構化內容交給程式。
「提升單一子元素包裝器」是什麼意思？
如果元素恰好包含一個子元素且自身沒有文字，包裝器會被移除，由子元素取代。遞迴套用後，會折疊現代網站常見的深層div巢狀。
為什麼要在傳送給LLM前清理HTML？
類別名稱、內嵌樣式和腳本會消耗權杖，卻沒有增加意義。清理後的骨架通常小80-95%，能降低成本，也讓模型有更多空間處理內容本身。
圖片和換行會保留嗎？
「移除空標籤」流程會明確保留br和img元素，即使它們沒有子元素，因為它們本身就承載意義。