JavaScript HTML 實體反轉義完整解決方案

JavaScript HTML 實體編碼與解碼最佳實踐

從 CKEditor 等富文本編輯器取得內容時，HTML 特殊字元已被轉義為實體（如 <, "）。傳遞給後端或儲存前需正確解碼，避免內容截斷或顯示異常。

❌ 不建議：手動 replace 逐一替換

// 缺點：不完整、效能差、易遺漏實體
content = content.replace(/"/g, '"');
content = content.replace(/&lt;/g, '<');
content = content.replace(/&gt;/g, '>');
content = content.replace(/&#39;/g, "'");
content = content.replace(/&rduot;/g, '“'); // 拼寫錯誤：應為 &rdquo;

✅ 方案一：瀏覽器原生 DOM 解碼（推薦）

function decodeHtmlEntities(str) {
    const textarea = document.createElement('textarea');
    textarea.innerHTML = str;
    return textarea.value;
}

// 使用範例
const decoded = decodeHtmlEntities('<div>Hello</div>');
// 結果：'
Hello
'

原理：瀏覽器解析 innerHTML 時會自動解碼 HTML 實體，textarea.value 取得純文字。

✅ 方案二：使用 DOMParser（現代瀏覽器）

function decodeHtmlEntities(str) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(str, 'text/html');
    return doc.documentElement.textContent;
}

✅ 方案三：成熟函式庫

• he：健壯的 HTML 實體編碼/解碼庫 npm install he
• DOMPurify：XSS 防護同時支援解碼
• lodash：_.unescape(str)

傳遞給後端的最佳策略

若需將 HTML 內容完整傳遞給後端（含標籤、屬性）：

// 前端：使用 encodeURIComponent 保護特殊字元
const encoded = encodeURIComponent(editor.getData());
// 傳送：$.post('/api/save', { content: encoded })

// 後端：解碼
String content = URLDecoder.decode(request.getParameter("content"), "UTF-8");

Base64 方案（二進位/大量資料）

// 前端
const base64 = btoa(unescape(encodeURIComponent(editor.getData())));

// 後端 (Java)
byte[] decoded = Base64.getDecoder().decode(base64Str);
String content = new String(decoded, StandardCharsets.UTF_8);

編碼與解碼對照

核心建議

1. 優先使用瀏覽器原生 textarea.innerHTML → value 解碼
2. 傳輸層使用 encodeURIComponent 或 JSON
3. 避免手動字串替換，不完整且難維護
4. 後端儲存原始 HTML，輸出時做 XSS 防護

正確處理 HTML 實體編解碼，能避免資料遺失、XSS 風險與顯示異常。