HTML Encoder

HTML Encoder / Decoder

把 `& < > " '` 跳脫為安全的 HTML 實體,或把實體編碼的文字解碼回原文。四種編碼層級 — Minimal、Named、Numeric、All non-ASCII。UTF-8 + emoji + CJK 全支援,在瀏覽器內運算。

預設用 Minimal — 只跳脫 & < > " ' 這 5 個會破壞 HTML 內文 / 屬性語境的字元。所有現代樣板引擎也是這樣做。如果你要把版權符號、不換行空白、箭頭等用可讀的命名實體呈現(&copy; 而非 &#169;),選 Named。當 HTML 要送進可能不認得命名實體的 pipeline 時,選 Numeric。要丟到嚴格純 ASCII 系統(舊式 email、爛 API)時,選 All non-ASCII。

&apos; 在 XML 與 HTML5 是合法的,但 不在 HTML 4.01 — 較舊的瀏覽器會把它當成字面字串顯示為 '。數字參照 &#39; 在所有環境都可運作。解碼器為相容性接受 &apos; 作為輸入。

輸入
輸出

為安全的 HTML 輸出而生

把使用者內容跳脫為樣板可用、把實體編碼的資料解碼回來 — 加上幾個讓你真正用得開心的小細節。

四種編碼模式

Minimal 只跳脫 5 個 HTML 不安全字元(& < > " ') — 一般使用者內容套樣板的最安全預設。Named 在 HTML5 提供命名實體時使用可讀的 &copy; / &nbsp; / &hearts;。Numeric 把每個非 ASCII codepoint 編碼成 &#NN;。All non-ASCII 把所有可印刷 ASCII 範圍外的 codepoint 都編碼,適合舊式 / 純 ASCII pipeline。

解碼任何實體

解碼器支援命名實體(&copy;)、十進位(&#169;)、十六進位(&#xA9;)。Surrogate-pair codepoint(emoji、古文字)經 UTF-16 正確 round-trip。

即時預覽

輸出在每次按鍵後即時更新 — 不需要按 Encode / Decode 按鈕。一鍵切換方向;Swap 按鈕把輸出搬回輸入,讓你串接多次轉換。

UTF-8 + emoji + CJK 全支援

每個 Unicode codepoint 都能 round-trip:中文、العربية、русский、हिंदी、🎉、Þorgeir。編碼器以 codepoint 為單位走訪(非 charAt),surrogate pair 不會被切壞。

保護隱私

你的文字留在你的裝置上。編碼器、解碼器、命名實體查找表全部以 JavaScript 在本地執行。打開 DevTools → Network 即可驗證沒有任何對外請求。

輕量且快速

純 JavaScript,無框架運行時。冷啟動 gzip 後不到 25 KB。100 KB HTML 文件 5 毫秒內完成編碼。

如何編碼或解碼 HTML 實體

從原始文字到實體安全輸出,四個步驟。

  1. 1

    貼上你的文字

    把純文字或 HTML 丟到 Input 面板。任何內容都行 — 使用者留言、部落格貼文、emoji、中日韓、RTL 文字。編碼器以 codepoint 走訪,多 byte 序列不會被切壞。

  2. 2

    選擇方向與模式

    Direction 設為 Encode(文字 → 實體)或 Decode(實體 → 文字)。Encode 時選擇模式:Minimal 適合套樣板、Named 用可讀實體、Numeric 把非 ASCII 編成 &#NN;、All non-ASCII 輸出純 ASCII。

  3. 3

    看即時預覽

    輸出在每次按鍵後即時更新。切換下拉選單即時比較不同模式。Swap 把輸出搬回輸入 — 適合 round-trip 驗證(編碼後再解碼 = 原文)。

  4. 4

    複製或下載

    用複製圖示把結果丟到剪貼簿,或用下載圖示存成 output.encode.html / output.decode.txt。體積差(字元 / bytes 進 → 出)讓你看清楚編碼讓文字膨脹或縮小多少。

為日常 web 開發而生

四種常見場景 — 在這些情況下,瀏覽器內隱私優先工具比把程式碼貼到隨便的線上 encoder 安全多了。

把使用者內容安全地嵌入樣板

使用者留言、表單回覆、搜尋詞 — 任何來自外部、會被放進 <p>、<li> 或屬性的文字。在字串拼接進 HTML 之前先用 Minimal 模式編碼,你就不會遇到壞掉的標記與最基本的 XSS。

從 API 讀進已經編碼過的資料

有些 API 回傳的是已經實體編碼過的字串(RSS feed、某些 CMS 匯出、爬到的 HTML)。貼進來、按 Decode、得到原始 Unicode。解碼器支援命名、十進位、十六進位實體,包括 surrogate pair。

Email 主旨與 meta 標籤

<title>、<meta name="description">、<meta property="og:title"> — 這些遇到特殊字元都需要實體跳脫。把標題編碼一次,貼到三個地方。

不能進雲端服務的敏感內容

內部 CMS 內容、客戶資料、NDA 樣板 — 任何不能貼到雲端 encoder 的東西。瀏覽器內工具讓每一個位元組都留在你的筆電上。打開 DevTools → Network 驗證沒有東西外洩。

100% 私密 — 在瀏覽器中運算

你的文字永遠不會離開你的裝置。打開 DevTools → Network,編碼或解碼過程中沒有任何對外請求。

  • 編碼器、解碼器、命名實體查找表全部以 JavaScript 在你的機器上執行 — 沒有伺服器端轉換、沒有第三方 API。
  • Surrogate-pair codepoint(emoji、古文字)以 codepoint 走訪處理,不是 byte-level 對應 — 所以貼一個 🎉 經 round-trip 仍是 🎉。
  • 無需登入、不對文字內容埋點。只用一個 cookie 記錄 cookie 同意狀態,以及一個 cookie 記錄語言偏好。

相關文章

為 HTML 跳脫、實體表、安全樣板精選的實用文章。

常見問題

我該選哪一個模式?

預設用 Minimal — 只跳脫 & < > " ' 這 5 個會破壞 HTML 內文 / 屬性語境的字元。所有現代樣板引擎也是這樣做。如果你要把版權符號、不換行空白、箭頭等用可讀的命名實體呈現(&copy; 而非 &#169;),選 Named。當 HTML 要送進可能不認得命名實體的 pipeline 時,選 Numeric。要丟到嚴格純 ASCII 系統(舊式 email、爛 API)時,選 All non-ASCII。

為什麼用 <code>&amp;#39;</code> 而不是 <code>&amp;apos;</code> 來跳脫單引號?

&apos; 在 XML 與 HTML5 是合法的,但 不在 HTML 4.01 — 較舊的瀏覽器會把它當成字面字串顯示為 '。數字參照 &#39; 在所有環境都可運作。解碼器為相容性接受 &apos; 作為輸入。

Emoji 與中日韓字會壞掉嗎?

不會。編碼器以 codepoint 走訪(非 UTF-16 code unit),所以 🎉(U+1F389)會被編成 &#127881; 並能正確 round-trip。中文也一樣(中文 → numeric 模式下變成 &#20013;&#25991;)。

編碼後直接把使用者輸入嵌入 HTML 安全嗎?

對 HTML 內文與屬性 — 用 Minimal 模式即可。對 URL 語境(href="...")還需要 URL 編碼。對 inline JavaScript 或 CSS,HTML 與 URL 編碼都不夠 — 請用懂這些語境的樣板引擎。絕對不要把未跳脫的使用者輸入貼進 <script> 區塊。

資料會傳到伺服器嗎?

不會。編碼器、解碼器、命名實體查找表全部以 JavaScript 在你的裝置上執行。打開 DevTools → Network 即可驗證編碼 / 解碼過程沒有任何對外請求。貼機密、客戶資料、內部樣板進來都安全 — 沒有任何位元組離開你的筆電。