在线 HTML 实体编码/解码工具：安全处理特殊字符

什么是 HTML 实体编码

HTML 实体编码（HTML Entity Encoding）是将特殊字符转换为以 & 开头、; 结尾的安全字符串的过程。它用于在 HTML 中安全地显示特殊字符。需要马上编码一段文本？用我们的 HTML 实体编码器，数据不出浏览器即可完成转换。

常见 HTML 实体

为什么需要 HTML 实体编码

1. 防止 XSS 攻击：用户输入中的 <script> 标签会被转义为安全文本
2. 显示特殊字符：在 HTML 中显示 <、>、& 等字符
3. 国际化支持：显示特殊符号和字符
4. 模板引擎输出：确保动态内容安全渲染
5. 邮件模板：邮件 HTML 需要更严格的转义
6. 富文本编辑器：安全地保存和显示用户内容

XSS 防护示例

危险的未转义输出

<!-- 用户输入：<script>alert('XSS')</script> -->
<div>{{ user_input }}</div>

<!-- 渲染结果（危险！） -->
<div><script>alert('XSS')</script></div>

安全的转义输出

<!-- 用户输入：<script>alert('XSS')</script> -->
<div>&lt;script&gt;alert(&#39;XSS&#39;)&lt;/script&gt;</div>

<!-- 渲染结果（安全） -->
<div>&lt;script&gt;alert('XSS')&lt;/script&gt;</div>

注意：实体编码只覆盖 HTML 正文 / 属性 语境。放到 <script> 字符串或 URL 查询里，要用对应语境的转义器，否则防护等于零。

如何使用在线工具

使用 ToolVault 工具匣 的 HTML 实体编码/解码工具：

1. 输入要编码或解码的文本
2. 编码模式：Special（默认五件套）/ All / Named first
3. 解码模式：Decode all（命名表 + 数字实体）、Named only，或 Peel all layers（剥开全部层）——把 < 这类双重编码一路解到明文
4. 需要全角→ASCII 规范化时，用别名页 html-entity-enhanced（默认 Named first，并带全角规范化开关）
5. 工作流核心 htmlEntityDecode 与 UI Decode all 共用命名表；多层剥开对应 decodeHtmlEntitiesFully

从 CMS、邮件或二次模板里拷出来的文本，经常已经「半编码」。先用 Peel all layers 看清真实字符，再在最终渲染边界编码一次，避免越修越乱。

代码中的 HTML 转义

JavaScript

// 编码
function escapeHtml(text) {
  const map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  return text.replace(/[&<>"']/g, m => map[m]);
}

// 解码（单层；双重编码请循环或用专用 peel）
function unescapeHtml(text) {
  const map = {
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
    '&quot;': '"',
    '&#039;': "'"
  };
  return text.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, m => map[m]);
}

Python

import html

# 编码
text = '<script>alert("XSS")</script>'
encoded = html.escape(text)
# 输出：&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

# 解码（html.unescape 会尽量剥多层命名/数字实体）
decoded = html.unescape(encoded)
# 输出：<script>alert("XSS")</script>

命名还是数字：按输出目标定

命名实体（&、 ）在源码里好读；数字形式（&、 ）无歧义且处处有效——包括 XML，那里除五个预定义外不存在命名实体。按目标选择：HTML5 双收；XHTML/XML 要数字或那五个；邮件与老旧 CMS 字段用数字最稳（实体表各家不同）。一个微妙的 bug 类：双重编码——管线对已编码文本再编码，页面渲染出字面 &。修复永远是先解码到规范形、再在边界处编码一次；工具里选「剥开全部层」就是为这一步准备的。

五个上下文，五种转义器

HTML 正文、属性值（引号要命）、URL（百分号编码不是实体）、JavaScript 字符串（反斜杠转义）、CSS url()——五套语法五个转义器，经典注入 bug 全是用错场合。实体编码只管前两个；script 块里的 " 什么都不防，因为解析器不对脚本内容做实体解码。按上下文选转义器（而不是按顺手）就是输出编码的全部纪律。

需要处理 URL 查询里的保留字符时，请改用 URL 编解码，不要把 HTML 实体塞进 query。

不该转义的三个场合

Markdown 处理器、标记为安全模板变量、邮件主题行——这些地方实体编码产生可见乱码（用户看到 &）。模式：在最后一刻（渲染时）转义而不是存储时——存储即编码的数据每轮编辑循环双倍编码，三轮后变成考古题。

与 JSX / React 的交界

React 默认对 JSX 插值做转义，多数列表渲染不必手工实体编码。真正危险的是 dangerouslySetInnerHTML 与把 HTML 字符串拼进属性。若你正在把静态 HTML 迁进组件，先走 HTML 转 JSX 理清属性，再决定哪里仍需要实体或消毒。

全角粘贴与中文排版清理

从 Word、PDF 或部分 IM 复制时，常混入全角 ASCII（＜div＞）和表意空格。它们不是转义器盯着的 HTML 特殊字符，直接编码会「看起来差不多」直到解析器报错。增强页打开全角→ASCII 规范化，再编码或解码，五件套与命名表才能看到你真正想要的半角形态。若上游 CMS 已经实体编码过一次，再叠一层 Peel all layers，避免半清理半残留。

FAQ

HTML 编码和 URL 编码有什么区别？

HTML 编码用于 HTML 文档中的特殊字符（< → <）。URL 编码用于 URL 中的特殊字符（空格 → %20）。两者解决不同场景的问题。

为什么 & 要先转义？

& 是 HTML 实体的起始字符。如果 & 不先转义，后续的转义字符会被错误解析。例如：< 如果 & 没转义，会被直接当成实体处理。

React 会自动转义吗？

React 默认对 JSX 中的变量进行自动转义。但如果使用 dangerouslySetInnerHTML，则不会转义，需要手动处理。

Decode all 和 Peel all layers 差在哪？

Decode all 只跑一层（< → <）。Peel all layers 重复解码直到稳定（最终得到 <）。排查双重编码粘贴时用后者；日常「刚编码完再解开」用前者即可。

排查注记

「五个上下文，五种转义器」是全文的纪律核心：HTML 正文、属性、URL、JS 字符串、CSS url() 各有各的转义器，实体编码只管前两个——script 块里的 " 什么都不防，因为解析器不对脚本内容做实体解码。双重编码的修法被写成铁律：先解码到规范形、再在边界处编码一次；「不该转义的三个场合」从反面补上同一条——存储即编码的数据每轮编辑循环双倍编码、三轮后变成考古题，所以转义要发生在最后一刻而不是存储时。Peel all layers 模式对应真实工作流：从 CMS 和邮件拷出的文本经常已「半编码」，先剥开看清真实字符再谈修，避免越修越乱。

本文出自 ToolVault 工具匣。相关工具：HTML 实体编码器、URL 编解码、HTML 转 JSX。更多开发者工具请访问 首页。