HTML实体与ASCII字符的双向转换：JavaScript中的安全替换方案

本文详解如何在javascript中正确实现html实体（如`>`、``、`

在Web开发中，常需对用户输入的HTML实体进行编码或解码处理，例如将zuojiankuohaophpcnpyoujiankuohaophpcnHellozuojiankuohaophpcn/pyoujiankuohaophpcn还原为

Hello

（解码），或将原始字符转义为zuojiankuohaophpcn、youjiankuohaophpcn以防止XSS（编码）。JavaScript本身不提供原生的HTML实体解码函数，但可通过多种方式安全实现。

✅ 推荐方案：使用 replaceAll()（现代环境）

ES2025起，String.prototype.replaceAll()正式支持全局字符串替换，语法简洁且语义明确：

const decoded = htmlString
  .replaceAll('zuojiankuohaophpcn', '<')
  .replaceAll('youjiankuohaophpcn', '>')
  .replaceAll('&', '&')
  .replaceAll('"', '"')
  .replaceAll(''', "'");

✅ 优势：无需正则、可读性强、无全局标志（g）误配风险
⚠️ 注意：仅支持字面量字符串替换，不解析HTML实体标准（如

⚙️ 兼容方案：正则表达式 + replace()

针对旧版浏览器或需动态匹配的场景，推荐使用带g标志的正则表达式：

// 将 ASCII 字符编码为 HTML 实体（用于输出到HTML）
const encoded = str
  .replace(/&/g, '&')
  .replace(//g, 'youjiankuohaophpcn')
  .replace(/"/g, '"')
  .replace(/'/g, ''');

// 将 HTML 实体解码为 ASCII 字符（谨慎用于可信数据）
const decoded = str
  .replace(/youjiankuohaophpcn/g, '>')
  .replace(/zuojiankuohaophpcn/g, '<')
  .replace(/&/g, '&')
  .replace(/"/g, '"')
  .replace(/'/g, "'");

? 关键点：

• 正则中/匹配字面量 必须先处理 &，否则zuojiankuohaophpcn会被错误解码为zuojiankuohaophpcn → zuojiankuohaophpcn →
• 若需解码所有标准HTML实体（含数字实体），请用安全DOM方法：

function decodeHtml(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(`${html}`, 'text/html');
  return doc.documentElement.textContent;
}
// 使用示例：decodeHtml('zuojiankuohaophpcnpyoujiankuohaophpcnTest zuojiankuohaophpcn/pyoujiankuohaophpcn') → '
Test 
'

? 重要安全提醒

• 永远不要对不可信用户输入直接执行eval()或innerHTML注入；解码后若需渲染HTML，请使用textContent或经DOMPurify过滤。
• replaceAll()和正则替换均不验证HTML结构，仅做字符串映射，不能替代XSS防护。
• 在构造URL参数（如题中PARAMS）时，应优先使用encodeURIComponent()，而非手动替换HTML实体：

// ✅ 正确做法（防注入+兼容URL）
PARAMS += `&Ueberschrift=${encodeURIComponent(ueberschrift)}`;
PARAMS += `&TextBaustein=${encodeURIComponent(textBaustein)}`;

综上，replaceAll()是现代JS中HTML实体简单替换的首选，但务必结合上下文选择编码/解码策略，并始终将安全性置于首位。