要把 HTML 轉成純文字 JavaScript 字串,請將標記序列化為逸出後的 const 賦值,使用雙引號、單引號或樣板字面值 (template literal) — 逸出反斜線、所選的分隔符號、行終止符號、控制字元,以及 (對於樣板字面值來說) 反引號和 ${ 序列,讓字面值在 JavaScript 計算時能逐字重現原始來源。這種轉換是純文字序列化,並非 HTML 解析:標籤、屬性、註解、實體、空白、內嵌樣式,甚至格式錯誤的標記都會原封不動地通過,因為轉換器從不建立 DOM。HTML to JavaScript Converter 會產生一個可直接複製的 const 宣告,能承受真實世界的標記,從帶有少量引號的短片段,到包含 Windows 路徑、正則表達式文字、多行字串和 Unicode 行分隔符號的完整文件。一切都在當前的瀏覽器分頁中執行;HTML 永遠不會被上傳、執行、預覽或儲存,而且不需要任何帳號或新的相依套件。

how to convert html to plain text in javascript
Convert HTML to a JavaScript String Safely

「HTML 轉純文字 in JavaScript」實際上的意思

當開發者搜尋在 JavaScript 內把 HTML 轉成純文字的方法時,實務上的工作通常有兩種:去除標籤以萃取出供顯示用的人類可讀內容,或是將原始標記內嵌為 JS 檔案中的字串字面值,以便稍後插入 DOM、餵給樣板引擎,或作為產生出的 bundle 的一部分一併發佈。本文談的是第二種工作 — 那種需要小心逸出,讓 JavaScript 引擎計算產生的 const 時,原始 HTML 能逐字元出現的工作。「純文字」這個關鍵片語最好解讀為「保存在 JavaScript 字串中的原始字元」,而非「渲染後文件的可見文字」。去除標籤是另一個問題,有它自己的解法 (DOMParser、暫存元素搭配 textContent、若同時需要清理則用像 DOMPurify 之類的函式庫)。我們在這裡要的是一個字面值,當執行環境解譯它時,能回傳原始 HTML 來源的精確位元組序列。

這個區分很重要,因為這兩種操作表面上看起來相似,但需要相反的工具。標籤去除器會解析標記、走訪 DOM、讀取文位元組點 — 並會悄悄改變空白、刪除註解、解碼實體,還可能依解析器不同而重新排序或正規化屬性。字串序列化器則完全不做這些事:它把來源當作 UTF-16 程式碼單位掃描,逸出那些會破壞周圍字面值的字元,然後寫出一個宣告,其值在 JavaScript 計算後必然等於輸入。如果你需要把標籤拿掉,就用解析器;如果你需要把標記保存在字串中,就用序列化器。

為什麼手寫逸出字串會出錯

HTML 和 JavaScript 字串字面值在好幾個字元上會互相衝突。引號是最明顯的:一個含有 class="card" 的片段在碰到內部那個 " 的瞬間,就會把雙引號字串給關掉。改用單引號只是把問題搬到撇號上 (it's、縮寫、所有格的 s)。多行 HTML 是另一個危險 — JavaScript 字串字面值不允許原始的行終止符號,所以把一個段落複製成三行時,引擎一讀就會產生 SyntaxError。反斜線則自然出現在 Windows 路徑、被複製到標記中的正則表達式字面值,以及既有的逸出序列中;每一個都需要加倍,讓原本的字元在計算後得以保留。

樣板字面值因為接受多行來源而受歡迎,但它帶來兩個新的失敗模式。標記中未逸出的反引號會提早關閉字面值,而 ${ 這個序列會啟動 JavaScript 的內插運算式 — 所以像 <button>Click ${here}</button> 這樣的片段會被當成程式碼而非文字來重新解讀。比較少見的是,行分隔符號字元 U+2028 和 U+2029 在樣板字面值裡是合法的,但在較舊的 JavaScript 引擎中會被當作行終止符號處理,以細微的方式破壞字面值。MDN 的 template literals 參考資料 和 ECMAScript 的 string literal 文法 詳述了這些規則;對於非平凡的標記來說,徒手遵循這些規則既繁瑣又容易出錯。

用 HTML to JavaScript Converter 序列化 HTML

  1. 把 HTML 來源原封不動地貼上,應該跟最終字串中呈現的樣子完全一致。片段或完整文件都可以;轉換器不會解析標記,所以標籤、屬性、註解、實體、內嵌樣式,甚至格式錯誤的輸入都會原封不動通過。
  2. 在識別欄位中輸入一個非保留字的 ASCII JavaScript 變數名稱。轉換器接受字母、數字、底線和錢字符號,並會拒絕保留字如 class、const、for 和 return,因為這些會產生無效的宣告。轉換器永遠輸出 const,所以只有在確實需要重新賦值時才手動修改宣告。
  3. 選擇輸出格式:雙引號字串、單引號字串或樣板字面值。雙引號會逸出字面上的雙引號並保留撇號的可讀性;單引號則相反;樣板字面值能處理多行標記,此外還會逸出反引號和 ${ 序列,讓貼上的內容不會意外變成可執行的 JavaScript。
  4. 複製產生的賦值,並在隔離的環境中執行來回測試。在沙箱化的執行環境中計算複製的字面值,然後斷言產生的字串與原始輸入逐字元完全相等。如果斷言通過,這個賦值就可以放心整合;如果沒有通過,就重新檢查來源中是否有殘留字元或貼上錯誤。

轉換器在每一種模式下都會保護所選的分隔符號、反斜線、常見的控制字元和行終止符號。在樣板模式下,它還會逸出反引號和 ${ 序列,讓貼上的 HTML 不會意外變成 JavaScript 內插運算式。反斜線會先逸出,這樣 Windows 路徑、正則表達式文字或既有的逸出序列,才能在 JavaScript 計算產生的賦值後保留其字面字元。U+2028 和 U+2029 會明確輸出,以利可攜性。結果就是一個可直接複製的 const 宣告,你可以貼到模組、建置腳本或伺服器端渲染的樣板中。

雙引號、單引號或樣板字面值

三種模式都能產生有效的 const 賦值;選擇取決於你的標記中哪個分隔符號最罕見,以及你希望輸出讀起來是什麼樣子。

模式逸出所選的分隔符號處理多行輸入最適用於
雙引號字串逸出 ",保留 ' 的可讀性編碼成 \n 和 \r,而非在字面值內放入原始的行終止符號含有大量撇號的標記 (英文文案、縮寫、所有格)
單引號字串逸出 ',保留 " 的可讀性與雙引號模式相同的新行處理方式屬性包在雙引號中的標記
樣板字面值除了標準逸出外,也逸出反引號和 ${ 序列在手寫程式碼中允許可讀的多行來源長片段、完整文件,或能受益於保留換行的程式碼

挑選那個在你的來源中最不可能出現被逸出字元的模式。以英文撰寫的行銷登陸頁通常偏好雙引號;擁有許多 class="..." 屬性的元件庫通常用單引號讀起來更乾淨;完整文件或任何能受益於保留縮排的內容,則通常會想要樣板字面值。轉換器會中和每種模式的特殊風險,所以選擇純粹是關於可讀性。

用來回測試驗證賦值

序列化只有在產生的字面值計算回去等於原始輸入時才算正確。最可靠的檢查是在隔離的執行環境中做相等性斷言 — 例如,一個簡短的腳本,把複製的 const 賦值後,用嚴格的 === 把產生的字串與原始來源做比較。如果輸入是片段 <a href="/x">it's fine</a> 而你選擇雙引號輸出,你會貼上產生的 const,執行 console.log(result === original),並確認每一個字元的值都是 true,包括撇號、斜線和內部的引號。任何差異 — 漏掉的逸出、多出來的反斜線、被正規化的新行 — 都會讓測試失敗,並指向真正的瑕疵。

對於生產環境的產生器來說,這個檢查能補充但無法取代用來驗證轉換器本身的外部語言標準測試案例。共有八個外部文法案例被測試,包括引號、反斜線、新行、樣板分隔符號、內插語法和 Unicode 行分隔符號。當你在建置時產生字面值,請在輸出到達使用者之前,對每一個都執行同樣的相等性檢查;一個未逸出的分隔符號就能毀掉整個 bundle。把轉換器與來回測試搭配使用,能把字串序列化從一場猜謎遊戲變成管線中可重現的一個步驟。

What the converter does not do

The HTML to JavaScript Converter is a text serializer, not an HTML parser or a sanitizer. It does not build a DOM, does not reorder attributes, does not normalize case, does not repair unclosed tags, and does not turn HTML into JSX. Tags, attributes, whitespace, comments, entities, inline styles, and malformed markup remain text in the output. That narrow scope is intentional: a formatter or parser can change whitespace-sensitive content, scripts, styles, templates, and embedded data. If you need to validate or sanitize markup, use a maintained parser and a security policy designed for the destination.

The generated string is not automatically safe to insert into a page. If the resulting string is later assigned to innerHTML, passed to a template engine, evaluated as code, or combined with untrusted data, the destination still needs context-appropriate escaping and sanitization. Never use eval or new Function merely to display HTML. Prefer textContent when markup is not required, and use a maintained sanitizer plus a restrictive Content Security Policy when rendering untrusted markup is unavoidable. For projects that build documents from serialized HTML — for example, generating binary files in the browser from string templates — the same const assignment feeds the next pipeline stage and inherits the same escaping guarantees, which is why this approach pairs well with the serialization step described in the HTML to DOCX in JavaScript walkthrough.

Everything runs in the current browser tab. The HTML is not uploaded, stored, executed, previewed, or sent to a server, and no account or new dependency is required. That makes the converter practical for one-off snippets, build scripts, and quick experiments alike, and it keeps sensitive markup local throughout the workflow.

Related reading: JavaScript Playground API Alternative for Browser Testing.