HTML 轉義工具

🛡️ HTML Escape

📐 工作原理與說明
把 HTML 特殊字元轉義為實體,防止內容被當作標記解析。
  • 五字元:& < > " ' 是安全輸出的最小集合。
  • 場景:把使用者輸入插入 HTML 文本節點或屬性值前必須轉義。
  • 上下文差異:JS 內聯、CSS、URL 上下文需要各自的轉義規則,HTML 轉義不適用。
  • 補充:富文本場景需配合淨化庫,單靠轉義無法覆蓋所有 XSS 向量。
HTML 命名實體 &lt; &amp;
數字字元引用 &#60; &#38;
十六進位制引用 &#x3C; &#x26;
JavaScript 轉義 \" \\ \\n \\uXXXX
Unicode 轉義 \u4e2d\u6587
URL 編碼 %E4%B8%AD%E6%96%87
<div class="hello">Hello & "Welcome"!</div>

📦 批次處理

多行獨立處理

Escape and unescape HTML entities in your browser so you can safely display <, > and & in code samples and pages.

📖 常用 HTML 實體對照表

點選實體可複製到剪貼簿

📚 原理說明

什麼是 HTML 實體轉義?

HTML 實體轉義是將特殊字元轉換為 HTML 實體的過程,以確保這些字元在網頁中正確顯示而不被瀏覽器解析為 HTML 程式碼。

為什麼需要轉義?

• 防止 XSS 攻擊:轉義使用者輸入,避免惡意指令碼注入
• 正確顯示特殊字元:如 < > & 等在 HTML 中有特殊含義的字元
• 程式碼展示:在網頁中顯示 HTML/XML 原始碼

三種實體格式

1. 命名實體:&lt;(可讀性好,數量有限)
2. 數字字元引用(十進位制):&#60;(支援所有 Unicode 字元)
3. 十六進位制字元引用:&#x3C;(與 Unicode 碼點對應)

JavaScript 轉義

在 JavaScript 字串中,特殊字元需要用反斜槓轉義:
• \" 雙引號
• \\ 反斜槓
• \n 換行符
• \t 製表符
• \uXXXX Unicode 字元

URL 編碼

URL 中只能使用 ASCII 字元集。非 ASCII 字元和特殊字元需要使用百分號編碼(Percent-encoding),格式為 %XX,其中 XX 是字元的十六進位制值。

📋 歷史記錄

📚 深度解析:HTML 實體轉義

💡 常見使用場景

  • 服務端模板輸出使用者內容前轉義,防禦 XSS。
  • 給郵件模板或日誌兜一層轉義:把使用者暱稱拼進 HTML 字串前先轉義,防止暱稱裡的標籤破壞頁面結構。
轉義文本
輸入 `a & b < c` → 輸出 `a &amp; b &lt; c`。

❓ 常見問題(FAQ)

轉義能完全防 XSS 嗎?
對 HTML 文本上下文有效,屬性/JS 上下文還需各自轉義策略。
轉義後中文會變成亂碼嗎?
不會。只轉義五個危險字元(< > & " ')的方案完全不動其他字元,中文與 emoji 都原樣保留。若出現 &#x4E2D; 這類形式,說明用的是全量編碼模式;若出現問號或方塊,則是字元集或輸出編碼的問題(未用 UTF-8),與轉義無關。
⚠️ 使用說明與注意事項
📖關於「HTML 轉義工具」 ▼

📝工具簡介

HTML 轉義工具。專為開發者打造的線上工具,純前端執行,程式碼不離開瀏覽器。