html实体编码

HTML 实体编码是什么

HTML 实体编码（HTML Entity Encoding）是把特殊字符转换为安全格式的技术。在 HTML 中，有些字符有特殊含义（如 <、>、&），直接写在 HTML 里会被浏览器解析为标签或指令。用实体编码可以"原样显示"这些字符。

实体编码以 & 开头，以 ; 结尾，中间是名字或数字。

三种表示方式

1. 命名实体（Named Entity）

&lt;        → <
&gt;        → >
&amp;       → &
&quot;       → "
&copy;      → ©
&nbsp;      → 不换行空格（non-breaking space）

2. 十进制数字编号（Decimal）

&#60;       → <
&#62;       → >
&#38;       → &
&#169;      → ©
&#160;      → 不间断空格

3. 十六进制数字编号（Hexadecimal）

&#x3C;      → <
&#x3E;      → >
&#x26;      → &
&#xA9;      → ©
&#xA0;      → 不间断空格

为什么要用 HTML 实体编码

场景一：防止 XSS 注入

用户输入的内容如果未经转义直接显示，攻击者可以注入恶意脚本：

// 危险：直接把用户输入放进 HTML
div.innerHTML = userInput;
// 如果 userInput = '<script>alert(1)</script>'
// 浏览器会执行这个脚本！

// 安全：对用户输入进行 HTML 转义
function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;');
}
// '<script>' → '&lt;script&gt;'（安全显示）

场景二：在网页中显示特殊符号

<p>5 &lt; 10 &amp;&amp; 3 &gt; 1</p>
显示为：5 < 10 && 3 > 1

场景三：合并空格

HTML 会把连续多个空格压缩成一个。用   可以保留原始空格：

<p>苹果    香蕉    橙子</p>
显示为：苹果 香蕉 橙子（空格被合并）

<p>苹果&nbsp;&nbsp;&nbsp;&nbsp;香蕉</p>
显示为：苹果    香蕉（保留4个空格）

完整常用实体对照表

JavaScript 中快速转义

// 最简洁的 HTML 转义（单行）
const escapeHtml = s => s.replace(/[&<>"']/g, c => ({
  '&': '&amp;', '<': '&lt;', '>': '&gt;',
  '"': '&quot;', "'": '&#39;'
}[c]));

// 反转义（解码）
const unescapeHtml = s => s.replace(/&(\w+);/g, (_, name) => {
  const div = document.createElement('div');
  div.innerHTML = '&' + name + ';';
  return div.textContent;
});

进阶：URL 编码 vs HTML 编码

不要混淆两者：

• URL 编码（Percent-encoding）：用于 URL 中，如 %20 表示空格，%3C 表示 <。用 encodeURIComponent()
• HTML 编码：用于 HTML 内容中，如 < 表示 <。用 &xxx; 格式

// URL 参数中的特殊字符
"hello world" → encodeURIComponent("hello world")
// 结果: "hello%20world"

<script> → encodeURIComponent("<script>")
// 结果: "%3Cscript%3E"

总结

HTML 实体编码的核心就三句话：1) 输出到 HTML 之前必须转义；2) 转义顺序是先 HTML 再 URL；3) 用 &xxx; 格式，永远不要把未转义的用户输入直接放进 innerHTML。

在线工具：HTML 实体编码/解码工具 支持一键互相转换，实时预览结果。