什么是 HTML 转义字符？新手必懂的基础概念与用法

一、HTML 转义字符到底是什么？一句话说透

HTML 转义字符（也称字符实体/HTML实体）是一套用特定编码来表示特殊字符的机制，目的是让浏览器把这些字符当作"普通文本"来显示，而不是当作 HTML 代码来解析。

它的格式固定：以 & 开头，以 ; 结尾，中间是实体名称或数字编码。

举个最直观的例子：

核心逻辑就一句话：在 HTML 中，<、>、&、"、' 这五个字符拥有"特权"，如果你想让它们作为普通文字出现，就必须用转义字符"缴械"。

二、为什么必须转义？两个根本原因

新手最常问的问题是："我直接打出 < 不行吗？为什么要绕一圈写 <？"

答案是：不转义，轻则页面显示错乱，重则网站被黑客攻击。

1. 防止 HTML 解析错误

HTML 解析器看到 < 就会认为"后面跟着一个标签名"，看到 > 就认为"标签到此结束"。如果你在正文里写：

<p>数学公式：5 < 10 且 10 > 5</p>

浏览器会把 < 10 误认为是一个标签的开始，导致后面的内容全部解析混乱，页面直接"花屏"。

正确写法：

<p>数学公式：5 &lt; 10 且 10 &gt; 5</p>

浏览器就会老老实实显示为：5 < 10 且 10 > 5。

2. 防止 XSS 跨站脚本攻击（这是安全底线）

XSS（Cross-Site Scripting）是 Web 开发中最常见、最危险的安全漏洞之一。 攻击者的手段非常简单：在输入框里填一段恶意脚本，如果你没有做转义，这段脚本就会在其他用户的浏览器里直接执行。

经典攻击案例：

<!-- 用户在评论区输入了这段内容 -->
<script>alert('你的Cookie已被窃取');</script>

如果没有转义，浏览器会把它当作真正的 <script> 标签来执行，弹出恶意弹窗，甚至窃取用户 Cookie。

转义之后：

<script>alert('你的Cookie已被窃取')</script>

浏览器只会把它当成一段普通文字显示出来，脚本完全失效。

所以，HTML 转义不是"可选项"，而是所有 Web 开发者的"必选项"。它是抵御 XSS 攻击的第一道防线。

三、五大核心转义字符（必须死记）

特别强调：& 必须第一个转义。 因为 & 是所有实体的引导符，如果你先转义了 < 和 >，但没转义 &，可能会产生连锁错误。

正确的转义顺序：

先转义 & → 再转义 < 和 > → 最后转义 " 和 '

用代码表示就是：

text = text.replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&apos;');

顺序反了会怎样？ 比如你先把 < 替换成 <，然后再替换 &，那原本的 < 会被变成 <，结果显示出来就是 < 这串文字，而不是 < 符号。这就是经典的"连锁转义错误"。

四、两种转义格式：命名实体 vs 数字实体

HTML 转义字符有两种写法，效果完全一样：

命名实体的优势：一看就知道是什么字符，< 比 < 好记得多。

数字实体的优势：不依赖命名，任何字符都能用数字表示，不会出现"这个字符没有命名实体"的尴尬。

实际开发中，命名实体够用 99% 的场景。只有处理生僻字符（如某些外语字母、数学符号）时，才需要用数字实体。

五、常用 HTML 转义字符完整对照表

5.1 基础必备（5 个）

5.2 空格相关（4 个）

为什么需要  ？ 因为 HTML 会把连续多个空格合并成一个。如果你想在页面里显示多个连续空格，必须用  。

5.3 版权与商标（4 个）

5.4 常用数学与特殊符号

5.5 ISO Latin-1 字符集精选

六、实战：四种常用转义方法

6.1 手动替换（最简单，适合少量文本）

直接用字符串的 replace 方法逐个替换：

function escapeHtml(text) {
  return text
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

优点：零依赖，逻辑透明，容易理解。
缺点：只能处理已知字符，遇到生僻字符会漏掉。

6.2 利用浏览器 DOM API（最安全，推荐）

浏览器本身就内置了转义能力，利用 innerText 或 textContent 可以自动完成转义：

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

原理：当你把一段文本赋值给 textContent 时，浏览器会自动把所有特殊字符转义为实体。然后读取 innerHTML，拿到的就是转义后的结果。

优点：不会遗漏任何字符，浏览器保证 100% 正确。
缺点：依赖浏览器环境，Node.js 中不能直接用。

6.3 正则表达式批量替换（适合服务端）

const escapeMap = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;'
};

function escapeHtml(text) {
  return text.replace(/[&<>"']/g, char => escapeMap[char]);
}

优点：性能好，适合处理大量文本。
缺点：需要手动维护映射表。

6.4 使用 DOMParser（最严谨）

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

优点：利用浏览器原生解析器，最严谨。
缺点：性能相对较低，不适合高频调用。

七、不同上下文需要不同的转义策略

这是新手最容易踩的坑：以为做了 HTML 转义就万事大吉了。错！转义必须根据数据出现的位置来选择。

最典型的反例：

<script>
  var name = "用户输入的内容";
</script>

如果用户输入 "; alert(1); //，即使你做了 HTML 实体编码，在 JavaScript 上下文中依然会突破字符串边界：

var name = ""; alert(1); //";
// JS 引擎不认识 "，它只认 "，所以依然会被截断

正确做法：在 JavaScript 上下文中，必须使用 JS 字符串编码：

var name = "\x22; alert(1); //"; // \x22 是双引号的 JS 编码

结论：HTML 实体编码只对 HTML 上下文有效。到了 JS、URL、CSS 里，必须换用对应的编码方式。这就是所谓的"上下文敏感编码"，也是 XSS 防御的核心原则。

八、常见错误与避坑清单

九、工具与库推荐（别重复造轮子）

十、写在最后

HTML 转义字符不是什么高深技术，它是 Web 开发的"基本功"，就像学开车要先学踩刹车一样。

记住三个核心点：

• &、<、>、"、' 这五个字符，在 HTML 中出现就必须转义

• 转义顺序永远是：先 &，再 <>，最后 "'

• 转义不是万能的，必须根据数据出现的上下文选择正确的编码方式

掌握了转义字符，你就掌握了 Web 安全的第一把钥匙。剩下的，就是在每一次写代码时，都把这把钥匙用上。