免费 HTML 实体编码器 — 转义 HTML

什么是 HTML 实体编码？

// Server-side templates auto-escape, but when you build HTML by hand you must escape yourself.
// The five reserved characters and their safe entities:
//   <  →  &lt;     >  →  &gt;     &  →  &amp;     "  →  &quot;     '  →  &#x27;

// Node.js — escape untrusted input before inserting it into HTML element content.
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')   // & first, so later entities are not double-escaped
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;'); // numeric form — safe in HTML4, HTML5 and XML
}

const userInput = `<a href="x">Tom & Jerry's</a>`;
const safe = escapeHtml(userInput);
// → &lt;a href=&quot;x&quot;&gt;Tom &amp; Jerry&#x27;s&lt;/a&gt;
document.getElementById('out').innerHTML = `<p>${safe}</p>`; // renders as literal text

// ---------------------------------------------------------------
// In practice, prefer the platform's built-in escaping where it exists:
//   - React / Vue / Angular escape interpolated text by default
//   - Use textContent instead of innerHTML when you only need text:
//       el.textContent = userInput;  // the browser escapes for you
//   - Server frameworks (Jinja, ERB, Blade) auto-escape unless you opt out

核心功能

实例演示

<a href="x">Tom & Jerry's</a>

<a href="x">Tom & Jerry's</a>

Visit our café — it's 😀

Visit our café — it's 😀

<>&"'

<>&"'

<>&"'

<>&"'

café

café  (named)  ·  café  (decimal)  ·  café  (hex)

如何使用 HTML 实体编码器

1. 1

   粘贴你的 HTML 或文本

   把你想转义的标记或纯文本放入输入框。编码输出会随你键入实时更新——没有提交按钮，也不会把任何内容发送到任何地方。

2. 2

   选择实体格式

   命名是可读的默认选项（<、&、©）。当消费系统偏好数字引用，或你无法保证命名实体被支持时，切换到十进制（<）或十六进制（<）。

3. 3

   （可选）编码所有非 ASCII

   对于现代 UTF-8 页面，保持此项关闭，让重音和表情符号作为可读的原始字符。只有当文本必须经过旧的单字节字符集时才勾选它，这会把每个高于 0x7F 的字符转换成 ASCII 安全的实体。

4. 4

   复制编码结果

   点击「复制」把转义后的字符串放入剪贴板，随时可粘贴到模板、文档页面或数据库字段中。「清空」会重置两个面板以处理下一个片段。

5. 5

   需要反向？切换方向

   当你想把实体变回它们所代表的字符时，使用「切换方向」跳转到 HTML 实体解码器。

常见 HTML 编码错误

replace < and > first, then &  →  &lt;  becomes  &amp;lt;

escape & first, then the rest  →  <  stays  <

It's here  →  may render as  It's here

It's here  →  renders as  It's here

&  encoded again  →  &  shows as  &

&  left as-is  →  renders as  &

href="/search?q=a&b c"  →  the space still breaks the URL

href="/search?q=a%26b%20c"  →  URL-encoded, valid

café on a UTF-8 page  →  needless, harder to read

café on a UTF-8 page  →  valid and clean

title="He said "hi""  →  attribute breaks out

title="He said "hi""  →  contained

谁在使用本工具

在网页上展示代码示例

在写需要展示字面 HTML 的教程或文档？转义片段，让 <strong>bold</strong> 显示为文本而非渲染出来。粘贴标记，复制转义后的输出，放入 <pre> 或 <code> 块中。

净化用户输入以防 XSS

在把任何用户提供的字符串插入 HTML 之前，转义那五个保留字符，让像 <script>…</script> 这样的载荷变成惰性文本。这是你手工构造标记时抵御跨站脚本攻击的基础防御。

把标记存入数据库字段或 JSON

需要把一段 HTML 片段作为纯字符串保存而不被下游解释？先编码它，让尖括号和与号在存储和重新显示中完整保留，再在取回时解码。

撰写邮件模板和 CMS 内容

邮件客户端和内容管理系统对原始特殊字符很不宽容。转义保留集——并可选地转义所有非 ASCII——让你的模板在可能与你字符集不一致的客户端间一致渲染。

为旧字符集转换文本

目标是一个无法处理原始 UTF-8 的系统？开启「编码所有非 ASCII」，把每个重音字母、符号和表情符号重写为 ASCII 安全的实体，保证文本在 7 位干净的管道中完好传输。

转义 XML 和 SVG 属性值

XML 和内联 SVG 共享 HTML 的保留字符。编码引号和尖括号，让带有嵌入标记的字符串安全地嵌入属性值，而不破坏文档结构。

快速查找实体

忘了商标符号是 ™ 还是 ™？键入该字符，从输出中读出它的命名、十进制和十六进制实体，或不离开页面就查阅内置速查表。

编码器如何工作

特殊字符模式（默认）

默认只转义 HTML 保留的五个字符——& < > " '——遵循 WHATWG HTML 序列化规则以获得安全输出。& 会被最先替换，这样为其他字符生成的实体不会被二次转义。所有其他字符，包括非 ASCII，都原样通过。

撇号使用 '

单引号不采用命名的 '——它在 HTML4 中未定义、在一些旧解析器中不安全——而是输出为数字 '（十进制 '），引用 U+0027。这与经过充分测试的 he 等库的约定一致，保证输出在 HTML4、HTML5 和 XML 中都安全。

命名、十进制和十六进制编码

格式选择器控制每个转义字符的写法：命名在有定义标签处使用标签（<、©），十进制以十进制写出 Unicode 码点（<），十六进制以十六进制写出（<）。数字形式引用与命名形式相同的码点，解析时可以互换。

「编码所有非 ASCII」选项

启用后，每个码点高于 0x7F 的字符都会以所选格式转换成实体——café 变成 café（命名）、café（十进制）或 café（十六进制）。表情符号等星形平面字符会用其完整码点编码（😀 → 😀）。这会产生 7 位干净的 ASCII 输出，用于旧式传输。

字符集与实体

字符集定义文本如何作为字节存储；实体则是仅用 ASCII 拼写一个字符的方式。在 UTF-8 页面上，非 ASCII 字符不需要实体，这就是默认让它们保持原始的原因。只有当输出必须穿过非 Unicode 字符集或对 UTF-8 不友好的系统时，才需要编码一切。

浏览器本地，零网络

编码在主线程上以 JavaScript 同步运行；没有 API 调用、没有到服务器的 worker 往返、没有持久化。输入永不离开页面，你可以在键入时观察空空的 Network 面板来确认。

HTML 转义最佳实践

在输出时、在正确的上下文中转义

在把数据插入 HTML 的那一刻编码，而非接收时，并让编码与上下文匹配。HTML 实体编码用于 HTML 元素和属性内容；URL 内用 URL 编码，脚本块内用 JavaScript/JSON 转义。在错误的上下文中转义会留下漏洞。

始终转义不受信任的输入

任何源自用户、上传或外部 API 的字符串，在落入你的标记之前都必须转义。这是核心的 XSS 防御：一旦尖括号变成实体，像 <script>alert(1)</script> 这样的载荷就变成了惰性文本。

优先使用现成的转义机制

React、Vue 和大多数服务器模板引擎会自动转义插值文本；设置 element.textContent 也会为你转义。把本工具用于一次性转换和理解输出——但在应用代码中，要依赖框架的自动转义而非自己手写。

在 UTF-8 页面上让非 ASCII 保持原始

如果你的页面声明了 <meta charset="utf-8">，不要把重音和表情符号编码成实体——原始 UTF-8 更短、更可读，而且同样正确。把「编码所有非 ASCII」留给真正需要的旧字符集场景。

在混合上下文中使用数字撇号

当输出可能被旧解析器、XML 处理器或邮件客户端消费时，对单引号优先用数字 ' 而非命名的 '。数字形式处处都能识别；命名形式则不然，渲染文本中冒出一个字面「'」是常见且可避免的错误。

常见问题