ToolDeck

HTML 实体转义工具

转义和反转义 HTML 实体(& < > " 等)

加载示例

输入

输出

本地运行 · 粘贴密钥安全无忧
结果将显示在此处…

什么是 HTML 转义?

HTML 转义是将在 HTML 中具有特殊含义的字符替换为对应实体引用的过程。必须转义的五个字符是:与号(&)、小于号(<)、大于号(>)、双引号(")和单引号(')。若不进行转义,浏览器会将这些字符解析为标记指令而非可显示的文本,从而破坏页面渲染,并为注入攻击打开缺口。

HTML 规范(由 WHATWG 维护)定义了两种字符引用形式:命名实体(如 &amp;)和数字实体(如 &#38; 或 &#x26;)。命名实体在源代码中更易阅读。数字实体(十进制或十六进制)可表示任意 Unicode 码位,适用于没有命名别名的字符。两种形式在浏览器中产生完全相同的输出。

反转义(也称为解码)是逆向操作:将实体引用还原为原始字符。这在从 HTML 源代码中提取文本、在系统间迁移内容,或调试存在重复编码的模板时非常常见。本工具在浏览器中支持双向操作,让你在数秒内验证转义逻辑,或从富含 HTML 的源代码中还原纯文本。

为什么使用 HTML 转义工具?

在大段文本中手动替换尖括号和与号既繁琐又容易出错。专用工具一步完成转换,无需安装任何软件。

即时转换
粘贴文本或 HTML,立即获得转义或反转义结果。所有处理均在本地 JavaScript 中完成,无需等待服务器往返。
🔒
隐私优先处理
输入内容不会离开浏览器,不会发送至服务器,也不会存储在任何地方。因此即使标记中包含凭据、API 密钥或内部代码,也可以安全使用。
📋
无需账号或配置
打开页面即可开始粘贴,无需登录、无需邮箱验证、无需安装任何软件,支持任何现代浏览器。
🌐
完整实体覆盖
处理五个必需的 HTML 特殊字符,以及十进制和十六进制数字实体。支持往返转换:转义后再反转义可还原原始字符串。

HTML 转义使用场景

前端开发者:显示用户输入
在页面中渲染用户提交的文本前,先进行转义,防止浏览器将其解析为 HTML 标签。这是任何输出原始字符串的模板抵御存储型 XSS 的主要防线。
后端工程师:生成 HTML 响应
将字符串拼接为 HTML 的服务端代码,在插入前必须对动态值进行转义。使用本工具验证你的转义函数在嵌套引号等边界情况下是否产生正确输出。
DevOps:在 HTML 中嵌入配置
在 HTML 页面中内联 JSON 或 Shell 命令(例如在 script 标签或 data 属性中)需要进行转义。验证配置片段中的尖括号和与号是否已被正确编码。
QA 工程师:测试 XSS 向量
将常见 XSS 载荷粘贴到工具中,确认应用程序的输出与正确转义版本一致。逐字符比对转义输出与应用实际产出。
技术写作者:文档中的代码示例
在基于 HTML 的文档(Jekyll、Hugo、自定义 CMS)中发布代码片段,需要对泛型类型语法和模板占位符中的尖括号进行转义。粘贴代码示例,所有特殊字符将立即完成编码。
学习者:理解 HTML 实体
输入或粘贴任意字符,查看其命名实体和数字实体形式。通过不间断空格、长破折号和 Unicode 符号等边界情况,深入理解 HTML 字符编码的工作原理。

HTML 实体参考表

下表列出了常用的 HTML 实体。五个特殊字符(& < > " ')在 HTML 内容和属性值中必须始终转义。其他实体为可选,但对于难以输入或在源代码中存在歧义的字符很有帮助。

字符说明命名实体数字实体
&Ampersand&amp;&#38;
<Less-than sign&lt;&#60;
>Greater-than sign&gt;&#62;
"Double quote&quot;&#34;
'Single quote / apostrophe&apos;&#39;
 Non-breaking space&nbsp;&#160;
©Copyright sign&copy;&#169;
®Registered sign&reg;&#174;
Em dash&mdash;&#8212;
Right single quote&rsquo;&#8217;
Euro sign&euro;&#8364;

转义与反转义:何时使用

两种操作互为逆运算。选错方向会产生重复编码或未受保护的输出。

转义(编码)
将不受信任或动态文本插入 HTML 时使用。将字面量 < 转换为 &lt;,使浏览器显示该字符而非开始一个标签。在渲染用户输入、日志条目或任何可能包含标记的字符串前使用。
反转义(解码)
从 HTML 源代码中提取纯文本时使用。将 &lt; 还原为 <。在从 CMS 迁移内容、解析抓取的 HTML,或修复 &amp;amp; 这类显示实体名称而非字符的重复编码字符串时使用。

代码示例

以下是四种语言中 HTML 转义和反转义的可运行示例,每个片段均涵盖双向操作,并处理嵌套引号和数字实体等边界情况。

JavaScript (browser / Node.js)
// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

escapeHtml('<img src="x" onerror="alert(1)">')
// → "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

// Unescape using DOMParser (browser only)
function unescapeHtml(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html')
  return doc.documentElement.textContent
}

unescapeHtml('&lt;div&gt;Hello&lt;/div&gt;')
// → "<div>Hello</div>"
Python
import html

# Escape special characters
html.escape('<script>alert("XSS")</script>')
# → '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'

# Escape including single quotes (quote=True is default in Python 3.8+)
html.escape("It's <b>bold</b>", quote=True)
# → 'It&#x27;s &lt;b&gt;bold&lt;/b&gt;'

# Unescape entities back to characters
html.unescape('&lt;p&gt;Price: &euro;10&lt;/p&gt;')
# → '<p>Price: €10</p>'

# Unescape numeric entities
html.unescape('&#60;div&#62;&#38;amp;&#60;/div&#62;')
# → '<div>&amp;</div>'
Go
package main

import (
    "fmt"
    "html"
)

func main() {
    // Escape HTML special characters
    escaped := html.EscapeString(`<a href="page?id=1&sort=name">Link</a>`)
    fmt.Println(escaped)
    // → &lt;a href=&quot;page?id=1&amp;sort=name&quot;&gt;Link&lt;/a&gt;

    // Unescape back to original
    original := html.UnescapeString("&lt;b&gt;Go &amp; HTML&lt;/b&gt;")
    fmt.Println(original)
    // → <b>Go & HTML</b>
}
PHP
<?php
// Escape HTML entities (ENT_QUOTES escapes both " and ')
echo htmlspecialchars('<p class="info">Tom & Jerry's</p>', ENT_QUOTES, 'UTF-8');
// → &lt;p class=&quot;info&quot;&gt;Tom &amp; Jerry&#039;s&lt;/p&gt;

// Convert all applicable characters to HTML entities
echo htmlentities('Price: 10€ — 50% off', ENT_QUOTES, 'UTF-8');
// → Price: 10&euro; &mdash; 50% off

// Decode entities back
echo html_entity_decode('&lt;div&gt;&amp;copy; 2026&lt;/div&gt;');
// → <div>&copy; 2026</div>

常见问题

HTML 转义和 URL 编码有什么区别?
HTML 转义将 HTML 中的特殊字符(< > & " ')替换为实体引用(如 &lt;),使其以文本形式显示。URL 编码(百分号编码)将 URL 中不安全的字符替换为 %XX 十六进制序列。两者保护不同的上下文:HTML 转义防止标记注入,URL 编码确保查询字符串和路径段合法有效。
HTML 中哪些字符必须转义?
必须始终转义的五个字符是:&(与号)、<(小于号)、>(大于号)、"(属性中的双引号)和 '(属性中的单引号)。若遗漏其中任何一个,可能导致渲染异常或产生跨站脚本漏洞。
&apos; 在 HTML5 中有效吗?
&apos; 命名实体在 HTML5 规范中已定义,所有现代浏览器均支持。它不属于 HTML 4 规范——HTML 4 仅识别 &amp;、&lt;、&gt; 和 &quot;。如需支持非常老的 HTML 4 解析器,请改用数字形式 &#39;。
如何修复 &amp;amp; 这类重复编码的 HTML 实体?
重复编码发生在已转义的字符串再次经过转义函数时。修复方法是反复反转义直到输出稳定。将重复编码的字符串粘贴到本工具并使用反转义模式,若仍存在 &amp; 引用则再次运行。为防止重复编码,在应用转义函数前检查输入是否已被转义。
能在 JavaScript 字符串中使用 HTML 实体吗?
HTML 实体由 HTML 解析器解析,而非 JavaScript 引擎。在 script 块中,代码在 HTML 解析器处理页面后运行,因此 script 块中的 &lt; 在 JavaScript 执行前已被还原为 <。对于内联事件处理器(onclick 等),属性值先经 HTML 解码再作为 JavaScript 执行。在外部 .js 文件中,实体没有特殊含义,被视为字面文本。
PHP 中 htmlspecialchars 和 htmlentities 有什么区别?
htmlspecialchars() 仅转义影响 HTML 结构的五个特殊字符(& < > " ')。htmlentities() 在此基础上还转义所有具有命名 HTML 实体的字符,如版权符号和重音字母。出于安全目的,带 ENT_QUOTES 的 htmlspecialchars() 已足够。htmlentities() 适用于需要 ASCII 安全输出、无法处理 UTF-8 的系统。
HTML 转义足以防止 XSS 吗?
HTML 转义能防止最常见的 XSS 场景:将不受信任的文本插入 HTML 元素内容或属性值。但它无法保护其他注入上下文。向 script 块插入用户数据需要 JavaScript 字符串转义;向 style 属性插入需要 CSS 转义;向 URL 属性(href、src)插入需要 URL 验证加编码。完整的 XSS 防御需要在每个插入点应用特定上下文的转义。