當你移除文字格式時要避免錯誤,需要一個安全且具確定性的邊界,將原始文字與富文本樣式區隔開,同時不執行或解析 HTML 標籤。最安全的方法仰賴原生瀏覽器表單控制項,它具有 1,000,000 個 Unicode 程式碼點的上限,可直接接受剪貼簿 API 提供的純文字承載內容,並忽略巢狀的 DOM 元素、腳本標籤以及樣式表。從文書處理器、網頁或電子郵件用戶端複製帶有格式的內容時,作業系統會儲存該資料的多種表示方式,包括富 HTML 和純文字。如果你將此內容貼到富文字編輯器或「contenteditable」區域中,瀏覽器會嘗試解析並清理 HTML,這經常導致版面配置損壞、隱藏的追蹤 span、損壞的符號或不必要的換行。透過將你的內容路由到專用的純文字欄位,你會在瀏覽器邊界處去除所有字型、顏色、連結和結構化中繼資料。這能確保僅保留字面字元、空格及連續的換行,保護你的目標資料庫、內容管理系統和程式碼編輯器免於受損輸入的危害。

富文字剪貼簿承載內容的隱藏風險
當你從應用程式複製文字時,作業系統的剪貼簿會同時儲存多種格式。例如,從網頁瀏覽器複製一段文字時,通常會在剪貼簿中填入用於富樣式的「text/html」以及未格式化文字的「text/plain」。如果你將其直接貼到富文字編輯器中,編輯器會讀取「text/html」資料流,保留字型、顏色和連結。為了避免格式化錯誤,將承載內容路由到原生 textarea 會強制瀏覽器捨棄「text/html」資料流,只提供「text/plain」承載內容。這可以防止以下幾個常見問題:
- 隱藏的樣式標籤:內聯樣式、span 標籤和 font-family 宣告可能會偷偷進入你的目標編輯器,覆寫你的全域 CSS 或範本樣式。
- 版面配置損壞:將網頁中的巢狀表格、清單或 div 放入另一個編輯器時,常會破壞欄對齊和響應式版面。
- 安全性漏洞:接受原始 HTML 的富文字解析器容易受到跨網站腳本 (XSS) 和嵌入在複製文字中隱藏追蹤像素的攻擊。
- 不一致的字型:混合來自不同來源文件的字型會讓你的最終文件顯得不專業且不協調。
例如,在處理共用文件時,使用者經常會面臨這些確切的挑戰。你可以在我們的指南如何從 Google Docs 移除文字格式中進一步了解如何處理此問題。
使用原生欄位安全地擷取純文字
許多線上轉換器聲稱可以清理文字,但它們使用的是「contenteditable」HTML 元素。這些元素本質上也是富文字編輯器。它們會解析 HTML、執行清理腳本,然後輸出它們認為的純文字。這是常見的錯誤來源。它可能會去除你原本想保留的實際 HTML 程式碼(例如程式碼片段),或是可能在你的瀏覽器中執行惡意腳本。移除文字格式工具透過使用原生 HTML textarea 元素來解決這個問題。原生 textarea 不會呈現 HTML。它僅接受瀏覽器剪貼簿 API 提供的純文字表示。
這表示如果你將 HTML 程式碼貼到該欄位中,工具會將角括號和字母視為字面字元。它不會將標籤轉換為格式化的元素。它會保留你精確的輸入。這個安全邊界可防止腳本執行、版面損壞以及非預期的標籤去除。該工具還透過將輸入限制為 1,000,000 個 Unicode 程式碼點來建立明確的效能上限。這限制了記憶體使用量並確保高效能,防止在處理異常大的檔案時瀏覽器當機。
如何在不出錯的情況下安全地移除格式
- 將內容貼到或輸入到原生純文字欄位中:將你的樣式化文字插入輸入 textarea。瀏覽器會自動從你的剪貼簿請求純文字表示,忽略所有富文字樣式、字型和顏色。檢查來源應用程式提供的內容,確認基本文字結構是否正確無誤。
- 建立純文字並驗證預覽:點擊建立按鈕以驗證輸入字串並連續化換行符號。檢查預覽區域,確認換行、定位字元、空格、清單標記和字面字元都按預期完整保留。
- 複製或下載精確的 UTF-8 結果:點擊複製按鈕將未格式化的文字傳送到你的剪貼簿,或將結果下載為文字檔。複製功能使用安全的 MDN Clipboard writeText API,而下載功能會建立本機的 MDN Blob,將「plain-text.txt」檔案直接儲存到你的裝置。
格式轉換情境與換行連續化
換行是格式移除過程中出錯最常見的地方之一。Windows 使用 CRLF (\r\n),較舊的 Mac 系統使用 CR (\r),而 Unix/Linux 系統使用 LF (\n)。當你將它們混淆時,文字檔可能會顯示為一整個巨大的行,或出現雙倍間距。該工具會將所有 CRLF 和單獨的 CR 換行連續化為標準 LF 換行。它不會修剪開頭或結尾的空格、不會合併段落,也不會變更智慧型引號。這能確保文字除了視覺格式之外,仍保持原有的結構。
下表概述常見的富文字元素在貼到原生純文字欄位時如何轉換:
| 元素類型 | 富文字格式行為 | 純文字轉換結果 |
|---|---|---|
| 粗體與斜體文字 | 樣式化字型、粗細和樣式 | 沒有視覺粗細的原始字元 |
| 超連結 | 帶有顯示文字的隱藏 URL 錨點標籤 | 視來源應用程式和瀏覽器而異 |
| 表格 | 視覺化格線、邊框和儲存格 | 視來源應用程式和瀏覽器而異 |
| 字面 HTML 標籤 | 呈現為視覺元素 | 保留為字面文字字元 |
這種轉換行為在將文字傳輸到開發環境時特別有用。如果你正在使用程式碼編輯器,可以在我們的指南如何在 Notepad++ 中移除文字格式中進一步了解。
技術邊界與系統效能
為了理解安全上限如何應用於實際任務,讓我們計算一份大型文件的程式碼點使用量。假設你有一份包含 150,000 個單字的長篇手稿。如果我們假設平均單字長度為 5 個字元加上 1 個空格作為分隔,則每個單字大約需要 6 個 Unicode 程式碼點。我們可以使用以下公式計算總程式碼點:
總單字數 * 每個單字的平均程式碼點數 = 總程式碼點數
代入我們的值:
150,000 個單字 * 6 個程式碼點 = 900,000 個程式碼點
由於 900,000 小於該工具 1,000,000 個程式碼點的最大安全閾值,整份文件將能順利處理,不會發生截斷或記憶體錯誤。這項本機驗證可確保即使是大型書籍、腳本或資料集也能安全地清理。絕不會將任何資料傳送到伺服器。React state 僅在頁面開啟期間保留資料。