HTML 貼上後轉 Markdown：去除網頁複製的 span 與 inline style

從 Microsoft Word、Google Docs 或網頁複製文字，貼到編輯器裡卻看到一堆 <span style="...">、class="c3"、<o:p> 標籤，這種情況你一定遇過。內容明明都在，但被不必要的裝飾標籤埋沒，Markdown 渲染器根本不需要這些東西。這篇整理如何把手上的髒 HTML 一次貼上就轉成乾淨的 Markdown。

先講結論

把髒 HTML 貼到 HTML to Markdown 轉換器 按下執行按鈕即可。<span>、行內 style 屬性、class 名稱、<font> 標籤、Word 專屬標記在 Markdown 中沒有對應語法，會被自動移除，只剩標題、列表、連結、表格等文件結構。所有轉換在瀏覽器內完成，貼上機密文件也不會有資料傳到外部。

跟 HTML 清理工具的差別

一般 HTML 清理工具（HTML Cleaner）或「去除行內樣式」的工具，回傳的是乾淨的 HTML。裝飾性的東西會被拿掉，但 <p>、<ul>、<div> 這些標籤本身還在。

如果你的目標是 README、GitHub issue、Notion、Obsidian、Wiki 或是餵給 LLM 的 prompt，需要的格式是 Markdown 不是 HTML，所以還差一步。

轉換工具一次做兩件事：去除裝飾雜訊，同時輸出 #、-、[文字](URL) 等 Markdown 語法。不需要先清理 HTML 再另外轉一次。

貼上的 HTML 為什麼會髒

髒的方式取決於從哪裡複製。不同來源混入的雜訊類型不同。

Microsoft Word

Word 會用 Office 專屬的標記包起來。style 屬性裡的 mso-* 屬性、代表段落的 <o:p> 標籤、條件式註解（<!--[if gte mso 9]>）、<font face="..."> 標籤都是典型例子。這些對讀者和 Markdown 渲染器來說沒有任何意義。

另外，混入的標記會因複製路徑而不同。從 Word 桌面版直接複製、經過 Outlook、或從瀏覽器開啟的 Word 線上文件複製，三種路徑產生的標籤量和種類都有差異。

Google Docs

Google Docs 傾向產出行內 CSS 而非語意化標籤。粗體文字常用 <span style="font-weight:700"> 而非 <strong>，文件裡還充斥大量自動產生的 class 名稱，以及包裹文字片段的空 span。class 名稱是自動生成的，沒有固定規則可以依賴。

網頁複製

在瀏覽器中選取網頁的某個區域複製時，該網站用來排版的元素會跟著一起進來。包裝用的 <div>、utility class 屬性、行內 style，甚至旁邊的導覽連結、分享按鈕、廣告區塊都可能混進來。轉成 Markdown 後，這些排版層會被丟掉，只剩可讀的內容結構。

ChatGPT 與豐富文字編輯器

從 ChatGPT 介面或 WYSIWYG 編輯器複製有格式的回應時，常會得到包含編輯器專屬 span 或 data-* 屬性的 HTML。直接貼到別的工具會把雜訊一起帶過去，轉成 Markdown 則只保留純內容。

PDF 檢視器複製

從 PDF 檢視器選取複製的文字，本來就不是 HTML。沒有 span、style、class，只有純文字，所以「去除裝飾雜訊」這個步驟對它根本不適用。

PDF 只儲存文字在頁面上的座標位置，沒有區分標題和正文的資訊，所以段落中途可能出現任意換行，雙欄版面可能左右交錯。特別是表格容易因為欄位錯位而變形，直接修改貼上的文字不如把 PDF 檔案本身餵給 PDF 轉檔工具來得可靠。表格格式崩壞的具體原因與對策詳見 PDF 轉 Markdown 時表格格式崩壞的原因。

什麼會被刪掉，什麼會保留

以下是常見的髒標記與轉換結果對照：

有兩點需要注意：

• Markdown 是比 HTML 表達範圍更小的語言。有結構對應物的元素（標題、列表、連結、強調、表格、圖片）會保留，純裝飾性的全部丟掉。
• 「轉成 Markdown」不等於「HTML 變零」。Markdown 規格允許行內 HTML，所以轉換工具會把無法對應的標籤（複雜表格、不支援的元素等）以原始 HTML 片段的形式保留，而不是把內容丟掉。結果是夠乾淨，但不能保證所有情況下每個 <span> 都一定會消失。

用 FormatArc 轉換髒 HTML

HTML to Markdown 轉換器 直接接收貼上的 HTML 並產出 Markdown。不需要安裝任何軟體，也不會上傳任何檔案。

1. 打開 HTML to Markdown 轉換器。
2. 在左側輸入區貼上髒 HTML，Word 的雜物、空 span 都不用管，直接貼。
3. 按下執行按鈕，右側立即顯示整理後的 Markdown，點擊複製按鈕即可存到剪貼簿。

HTML 解析和 Markdown 生成都跑在瀏覽器內的 JavaScript 引擎上，所以從 Word 貼上的機密合約或 CMS 未公開草稿都會留在你的裝置上，不會傳到 FormatArc 或任何第三方伺服器。線上轉換的隱私檢查清單詳見 線上安全：轉換工具使用前必做的 5 項隱私檢查。

轉換沒有完全乾淨時怎麼處理

有些複雜格式需要再手動整理一下。

Word 的表格與框線

從 Word 或試算表複製的表格常帶有 colspan（合併欄）、rowspan（合併列）或框線樣式，這些在 Markdown 的 pipe table 語法中沒有對應寫法。合併儲存格會被攤平，整個表格也可能以行內 <table> 標籤的形式保留。如果只是要處理表格，建議先簡化儲存格結構再轉換。表格的邊緣案例（直線、換行、欄位數不符）詳見 HTML 表格轉 Markdown 表格。

深層巢狀列表與換行

多層巢狀的列表、列表項目內的 <br> 標籤、有序無序列表交錯的結構，可能會產生多餘空行或縮層錯位。轉換後檢查輸出結果，如果渲染器顯示不對，手動調整縮排即可。

輸出中殘留的行內 HTML

結果中如果還有 <sub>、<details> 區塊或複雜表格等 HTML 標籤，這是正常行為。轉換工具為了不丟失內容而故意保留。GitHub 和大多數靜態網站產生器都支援 Markdown 內的行內 HTML，所以留著沒問題，不需要也可以手動刪掉。

網頁複製混入的導覽元素

如果複製了網頁的較大區域，導致選單項目或分享按鈕的連結混進來，複製時縮小選取範圍，或從 Markdown 輸出中刪掉上下多餘的連結列表。沒有自動方法能區分哪個連結是導覽、哪個是正文。如果需要將 WordPress 站點的文章批次遷移，可參考 WordPress 匯出 Markdown。

常見問題

為什麼 span 和 style 屬性會被刪掉？

Markdown 沒有表達行內 CSS、class 名稱或包裝 span 的語法，所以轉換工具會移除它們、只保留結構性內容。目的是取得不綁定特定編輯器、任何渲染器都能讀的高可攜性 Markdown。

Microsoft Word 的 mso- 標記也會被移除嗎？

會。mso-* 形式的 style 屬性、<o:p> 段落標籤、<font> 標籤、條件式註解在 Markdown 中沒有對應物，全部會被移除。不管 Word 以哪種路徑輸出標記，Markdown 結果中都不會殘留。

可以保留 class 名稱或樣式嗎？

不行。Markdown 無法表達這些樣式，所以會被刻意移除。如果需要保留樣式，把原始 HTML 另存一份，結構轉成 Markdown 後，在渲染階段再套用 CSS。渲染細節可參考 Markdown 轉 HTML 完整指南。

貼上機密文件安全嗎？

安全。轉換完全在瀏覽器內的 JavaScript 執行，貼上的 HTML 不會上傳到 FormatArc 或任何第三方伺服器。即使斷網離線狀態也能正常運作。

轉換後的 Markdown 為什麼還有 HTML？

因為 Markdown 規格本身允許行內 HTML。轉換工具遇到無法對應的結構（複雜表格、不支援的標籤）時，會以原始 HTML 片段保留而不是刪除內容。留著或手動刪掉都可以，大多數渲染器都能正常顯示。

總結

從 Word、Google Docs、ChatGPT 或網頁複製的髒 HTML，貼到 HTML to Markdown 轉換器就能變成乾淨的 Markdown。span、行內 style、class、Office 專屬標記會被清除，標題和列表等核心結構會保留。下次複製貼上時被格式問題卡住，試試瀏覽器內的安全轉換。HTML 轉 Markdown 的完整指南（含 CLI 方法）可參考 HTML 轉 Markdown 指南。