HTML转义能提升特殊字符吗？正确替代特殊字符的实战指南

开门见山，我们得先澄清一个常见的误解：HTML转义本身并不“提升”或“美化”特殊字符。它的核心使命其实很简单——把那些在HTML里有特殊意义的字符，“翻译”成浏览器能安全识别的代码，防止它们被误解析成标签或指令。用对了是安全屏障，用错了反而会引发显示错误甚至安全漏洞。

哪些字符必须转义才能安全显示？

关键点在于场景：只有当你准备把用户输入或动态生成的内容，插入到HTML的文本上下文中时，转义才是必需的。记住这五个“重点关照对象”就足够了：

• < → 转成<（这是头号通缉犯，不转义就会被当成标签开头）
• > → 转成>（虽然很多时候不转也能显示，但在属性值里或追求严格规范时，转了更保险）
• & → 转成&（这个最容易遗漏！没转的话，后面跟着的实体字符，比如©就可能被错误解析，导致显示乱码）
• " → 转成"（当你用双引号包裹属性值时必需，比如title="Hello"）
• ' → 转成'（单引号，仅在使用单引号包裹属性时才需要，不过考虑到兼容性，更推荐统一使用双引号）

Ja vaScript中手动转义，小心这个经典陷阱

很多人图省事，用一串replace()链式调用来处理，这其实埋下了隐患。替换顺序一旦搞错，或者字符被重复处理，就会出乱子。举个例子，如果先替换了<，再替换&，那么已经变成<里的&又会被再转一次，结果面目全非。

更可靠的做法是建立一张映射表，一次遍历完成所有替换：

立即学习“前端免费学习笔记（深入）”；

function escapeHtml(str) {
  const map = {
    '&': '&',
    '<': '<',
    '>': '>',
    '"': '"',
    "'": '''
  };
  return str.replace(/[&<>"']/g, c => map[c]);
}

这里有个技术细节需要注意：对于单引号，使用数字字符引用'通常比命名实体'有更好的兼容性，后者在IE8及更早的浏览器中可能不被支持。

服务端模板里，别依赖手动转义

现代服务端模板引擎通常都内置了自动转义机制，这是第一道也是最重要的一道防线。比如在Express搭配EJS时，<%= %>会默认进行转义，而<%- %>则不会——选错一个符号，就等于门户大开。Django模板也是同理，{{ value }}默认转义，只有{{ value|safe }}才会输出原始HTML。

判断逻辑其实很清晰：

• 输出目标是HTML文本节点？→ 毫不犹豫地启用模板的默认转义。
• 输出内容是href或data-*这类属性值？→ 同样需要转义，并且要确保属性值的引号匹配正确。
• 输出位置在这样的字面文本。这通常意味着同一个内容被重复转义了两次，根源就在于没有清晰地约定数据在流转过程中，应该在哪个环节、由谁负责转义。