HTML 转义/反转义

将 &、<、>、"、' 等特殊字符转换为 HTML 实体(转义),或将实体还原为原始字符(反转义)。适用于防范 XSS 攻击及在 HTML 中嵌入文本。

常用命名 HTML 实体一览

字符 命名实体 数字字符引用 说明
& &amp; &#38; 和号(表示"and"的符号)
< &lt; &#60; 小于号(与 HTML 标签的起始字符相同)
> &gt; &#62; 大于号(与 HTML 标签的结束字符相同)
" &quot; &#34; 双引号(属性值的分隔符)
' &apos; &#39; 单引号(属性值的分隔符)
  &nbsp; &#160; 不换行空格(不会触发换行的空白字符)
© &copy; &#169; 版权符号
® &reg; &#174; 注册商标符号
™ &trade; &#8482; 商标符号
€ &euro; &#8364; 欧元符号
¥ &yen; &#165; 日元符号
¢ &cent; &#162; 美分符号

什么是 HTML 转义

HTML 转义是把 &・<・>・"・' 这五个特殊字符,转换为浏览器不会当作语法解析的其他表记(HTML 实体)的处理。若把用户输入的字符串原样嵌入 HTML,< 与 > 会被误认为标签的开始与结束而导致排版错乱,还可能引发 <script> 之类恶意代码被执行的 XSS(跨站脚本)。HTML 转义正是防范该风险的基本对策。

反转义则相反,是把 &amp; 之类具名实体或 &#38; 之类数值字符引用还原为原本字符的处理。适用于从其他网站复制 HTML 源码时,或查看 CMS、论坛的发帖数据时,希望把以实体表记难以阅读的原文还原出来的场合。转换仅由浏览器内的 JavaScript 完成,输入内容不会发送至外部。

HTML 转义的使用方法

  1. 选择模式 若想把字符转换为实体请选择“转义”,若想把实体还原为原本字符请选择“反转义”。
  2. 把文本粘贴到输入栏 把想嵌入 HTML 的字符串,或含有实体表记的字符串粘贴到输入栏。
  3. 确认转换结果 输入的同时会实时反映到下方的转换结果栏。重新编辑输入则每次都会重新计算。
  4. 复制结果 可用“复制”按钮把转换结果送入剪贴板,直接粘贴到 CMS 正文或源代码中。

用好本工具的小技巧

  • HTML 转义是防范 XSS(跨站脚本攻击)的基础手段。在将用户输入嵌入 HTML 之前,务必先进行转义处理。
  • & 必须最先转义。如果先转换其他字符,新生成的 &amp; 中的 & 会被再次转义,造成重复转义。
  • 在属性值中嵌入字符串时,除了 "(双引号)外,最好连 '(单引号)也一并转义,这样更安全。
  • 本工具支持将十进制数字引用(&#38;)、十六进制数字引用(&#x26;)以及常用命名实体(如 &amp;)反转义还原。
  • 许多模板引擎(Blade、JSX、Vue 等)在插入变量时会自动进行 HTML 转义,但如果使用 {!! !!} 或 v-html 这类"原始 HTML 输出"语法,就需要自行手动转义。

HTML 转义的应用场景

在 CMS、博客文章中嵌入引用

在正文中刊载程序代码或其他网站的引文时,若把含 <、> 的字符串原样粘贴,会被误认为标签而导致显示错乱。事先转义后再粘贴即可安全显示。

确认论坛、评论区的发帖内容

想查看以实体表记原样保存在论坛或评论区数据库中的发帖时,可用反转义还原为原文以便阅读。

在 Markdown 中嵌入 HTML 片段

若想在 Markdown 文档中原样显示 HTML 标签的示例或示例代码,事先转义即可避免被 Markdown 解析器或浏览器当作标签解析,从而以字符串形式显示。

HTML 模板的调试

在模板引擎输出的 HTML 源码中查找意外被转义(或遗漏转义)之处时,也可用于对照转换前后的字符串。

术语集

HTML 实体(字符实体引用)
在 HTML 文档中安全显示具有特殊含义之字符的表记法。具名形式以「&」开头、以「;」结尾,如 &amp;。
数值字符引用
以 Unicode 码位编号指定字符的表记法。十进制写作 &#38;,十六进制写作 &#x26;,二者表示同一字符。
XSS(跨站脚本)
用户输入中所含脚本未经转义即被嵌入页面,从而在其他用户浏览器中执行非预期代码的漏洞。HTML 转义是代表性的对策之一。
净化(sanitize)
泛指从外部接收的数据中去除危险要素、或将其转换为无害形式的处理。HTML 转义是净化的一种。
&(和号)的转义
转义处理中应最先转换的字符。若先转换其他字符,生成的 &amp; 等中的 & 也会被二次转义,因此处理顺序至关重要。
属性值的分隔符
指包裹 HTML 标签属性值的 "(双引号)或 '(单引号)。属性值中若含这些字符而不转义,便会被误认为属性的分隔。

常见问题

&lt;、&gt;、&amp; 这三个字符会被 HTML 解析器当作语法的一部分来解释。如果忘记转义,浏览器可能会误认为是标签的开始或结束,从而导致页面布局错乱,甚至引发XSS(恶意脚本注入)攻击。

URL 编码(百分号编码)用于在 URL 中安全地表示特殊字符,而 HTML 转义则是为了防止字符在 HTML 文档中被误认为标签。两者用途不同,如果表单的值既要作为 URL 参数又要显示在 HTML 中,有时需要同时进行两种转换。

不会。所有转换处理都在浏览器内通过 JavaScript 完成,您输入的文本不会被发送到 toolbase.cc 的服务器。

不会。本工具只转义 &、<、>、"、' 这 5 个字符。表情符号和中文等非 ASCII 字符在现代 UTF-8 环境下可以直接安全显示,无需转换。
工具君

闲话 ― 继承自 SGML 的"字符引用"机制

HTML 实体(字符引用)的起源可以追溯到 HTML 的前身 SGML(标准通用标记语言)。1986 年标准化的 SGML 就已经具备了"字符引用"机制,用于在正文中使用标签分隔符 < 本身。HTML 几乎原封不动地继承了这一机制,早在 20 世纪 90 年代 HTML 的初期规范中,&lt;、&gt;、&amp; 等基本命名实体就已经被定义。

在 Unicode 尚未普及的年代,命名实体最初被广泛用于在纯 ASCII 环境下显示印刷用的特殊符号,例如版权符号 &copy;、注册商标符号 &reg; 以及各种希腊字母。HTML5 规范最终定义了超过 2000 种命名实体,甚至涵盖了对勾符号、音符符号等冷门字符。

如今随着 UTF-8 编码的普及,为避免乱码而使用字符引用的必要性已大大降低。但 <、>、& 这三个字符至今仍必须转义,原因完全不同:它们对 HTML 解析器而言具有特殊的语法含义(分别代表标签的开始、结束以及实体的开始),一旦忘记转义,就可能直接导致页面布局错乱或引发XSS 漏洞。