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

14次阅读

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

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

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

Hello

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

✅ 推荐方案:使用 replaceAll()(现代环境)

ES2021起,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, "'");

? 关键点:

立即学习Java免费学习笔记(深入)”;

  • 正则中/匹配字面量 必须先处理 &,否则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实体简单替换的首选,但务必结合上下文选择编码/解码策略,并始终将安全性置于首位。

text=ZqhQzanResources