HTML实体转ASCII，JavaScript技巧分享

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《HTML实体与ASCII转换：JavaScript实用技巧》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

本文详解JavaScript中HTML实体（如>、<）与对应ASCII字符（>、<）之间的安全、高效转换，涵盖replace()正则替换、现代replaceAll()用法、潜在陷阱及生产环境推荐实践。

在Web开发中，常需对用户输入或服务端返回的HTML编码字符串进行解码（如将>转为>），或在拼接URL参数前对特殊字符做编码（如将<转为<）。但需特别注意方向性：解码（HTML → ASCII）与编码（ASCII → HTML）是完全相反的操作，不可混用。

✅ 正确的双向转换方式

1. 将ASCII字符编码为HTML实体（推荐用于防止XSS）

适用于向HTML内容或URL参数中插入用户数据时的安全转义：

// 使用正则全局替换（兼容所有环境）
function encodeHtmlEntities(str) {
  return str
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

// 示例
const textBaustein = 'Click <button>OK</button>';
const encoded = encodeHtmlEntities(textBaustein);
// 结果: 'Click &lt;button&gt;OK&lt;/button&gt;'
PARAMS += "&TextBaustein=" + encoded;

⚠️ 注意：不要使用.replaceAll('<', '<')直接替换字符串——它无法识别Unicode变体或上下文，且易遗漏其他危险字符（如"、'、&）。务必使用正则/

2. 将HTML实体解码为ASCII字符（谨慎使用）

仅在明确需要还原原始语义内容时使用（如解析富文本摘要）：

// 简单场景：仅处理常见实体（不推荐用于不可信输入）
function decodeHtmlEntities(str) {
  const temp = document.createElement('div');
  temp.innerHTML = str;
  return temp.textContent || temp.innerText || '';
}

// 示例（安全前提下）
const ueberschrift = 'Title > Subtitle';
const decoded = decodeHtmlEntities(ueberschrift); // 'Title > Subtitle'
PARAMS += "&Ueberschrift=" + decoded;

? 安全警告：innerHTML解码会执行内联脚本（如<script>alert(1)</script>），绝不可用于未经校验的用户输入。生产环境应使用专用库（如he）或服务端解码。

3. 现代语法：replaceAll() 的适用性

ES2021起支持原生String.prototype.replaceAll()，但仅接受字符串字面量，不支持正则：

// ✅ 合法（字符串替换）
ueberschrift.replaceAll('>', '>'); // 仅替换字面 '>' 字符

// ❌ 错误（正则需用 replace()）
ueberschrift.replaceAll(/\>/g, '>'); // TypeError: First argument must be a string

// ✅ 正确写法（仍用 replace + /g）
ueberschrift.replace(/\>/g, '>');

? 总结与最佳实践

• 永远优先考虑上下文安全：向HTML或URL注入内容前，必须编码；仅在可信、受控场景下才解码。
• 避免手动拼接参数：推荐改用URLSearchParams自动编码：

  const params = new URLSearchParams();
  params.append('Ueberschrift', ueberschrift); // 自动处理 & < > " 等
  params.append('TextBaustein', textBaustein);
  PARAMS = params.toString(); // 安全、简洁、符合标准

• 复杂HTML处理请用专业库：如 he（支持全Unicode实体、命名/数字实体、流式解码）。

掌握这些方法，你就能在保证安全性的同时，精准控制HTML与纯文本之间的转换逻辑。

今天关于《HTML实体转ASCII，JavaScript技巧分享》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！