HandyTools Hub

HTML 编解码器

编码或解码 HTML 实体。快速、私密、易于使用。

模式:

HTML 编码会把浏览器本应视为标记的字符转换成实体引用,让浏览器把它们按字面显示出来。如果你把 <strong>hello</strong> 当纯文本粘进页面,浏览器看到的是真的加粗标签;先编码,浏览器才会显示标签本身。这个工具支持双向编码和解码,提供用于日常转义的安全模式,以及把每个非 ASCII 字符转成数字引用的完整模式。它面向开发者、技术写作者,以及任何需要把代码当文本展示、或清理被转义过头文本的人。

如何使用

  • 在顶部选择“编码”或“解码”。模式按钮会同时替换输入框占位文字和主操作按钮的标签,一眼就能看出当前方向。
  • 编码模式下选择“安全”或“完整”。安全模式转义可能破坏标记的五个字符;完整模式额外转换所有可打印 ASCII 之外的字符。
  • 在左侧输入框粘贴或键入内容。输出会随输入更新,主按钮会用当前模式重新处理。大段粘贴在浏览器内处理,不产生网络往返。
  • 用“复制”把结果放进剪贴板,或用“下载”按当前方向命名并保存为文本文件。“清空”会清掉两个面板。

安全模式 vs 完整模式

输入安全模式完整模式
<p>café</p>&lt;p&gt;café&lt;/p&gt;&lt;p&gt;caf&#233;&lt;/p&gt;
He said "hi"He said &quot;hi&quot;He said &quot;hi&quot;
€100€100&#8364;100
A & BA &amp; BA &amp; B

安全模式恰好替换 &、<、>、" 和 '(单引号变成 &#39;)。完整模式做同样的事,然后把其余所有码点小于 U+0020 或大于 U+007E 的字符替换成十进制数字引用。从空格到 ~ 的可打印 ASCII 原样保留。当输出必须能在未声明 UTF-8 的页面或系统上存活、当你要产出纯 ASCII 文件、或当不可见控制字符需要变得可见时,完整模式是正确的选择。安全模式让人眼保持可读,当目标环境本来就是 UTF-8 时,通常这才是你想要的。

HTML 实体、字符引用与码点

HTML 提供两种方式书写你无法或不想直接键入的字符。像 &amp; 或 &lt; 这样的命名实体带有人类可读的名字,容易辨认。数字字符引用则写出该字符的 Unicode 码点,可以是十进制(&#233;)或十六进制(&#xE9;)。对浏览器来说两种形式表示同一个字符。完整模式始终输出十进制引用,因为它们紧凑、无歧义,而且十进制数字本身就是可读的 ASCII。知道码点常常是手工解码陌生引用最快的方法:&#8364; 是十进制 8364,也就是 U+20AC,欧元符号。

实操示例

  1. 用任意模式编码 <div class="box">Hi</div> 都会得到 &lt;div class=&quot;box&quot;&gt;Hi&lt;/div&gt;。除了那五个被转义的字符,其余全是可打印 ASCII,所以安全和完整模式结果一致。
  2. 编码 Résumé & Co.,安全模式得到 Résumé &amp; Co.,完整模式得到 R&#233;sum&#233; &amp; Co.,因为 é 是 U+00E9,十进制 233。
  3. 用完整模式编码一行包含制表符和版权符号的文本。制表符(U+0009)变成 &#9;,版权符号(U+00A9)变成 &#169;,两者都会在输出中显形。
  4. 解码 &#x48;&#101;&#108;&#108;&#111; 得到 Hello,解码 &lt;b&gt;bold&lt;/b&gt; 得到 <b>bold</b>。

解码器如何处理实体

解码器识别六个命名实体:&amp;、&lt;、&gt;、&quot;、&#39; 和 &nbsp;。它也处理十进制引用如 &#233;,以及十六进制引用如 &#xE9; 或 &#XE9;。其他一律原样透传,所以 &copy;、&euro; 和格式不完整的片段都会保持原样。一个值得记住的细节:&nbsp; 解码成普通空格,而不是不换行空格,因此解码后的段落可能和原页面重排得不一样。往返转换并不总是无损的。

常见错误

  • 重复编码。把 &lt; 再编码一次会得到 &amp;lt;,浏览器显示为字面文本 &lt;。如果不确定某个字符串是否已被转义,先解码。
  • 把完整模式当成安全升级。两种模式转义的是同样五个危险字符;完整模式只改变非 ASCII 文本的表示方式。
  • 以为每个命名实体都能解码。解码器只认六个名字加数字形式,所以 &copy; 和 &euro; 会让你意外。
  • 忘记完整模式也会转义你本想保留的字符,比如制表符、换行符,以及从文档粘贴进来的不可见控制字符。
  • 把编码后的值放进无引号属性。始终给属性值加引号,因为仅靠转义并不能让无引号属性变安全。

HTML 编码做不到的事

转义这五个字符能防止文本被当作标记读取,但它不是净化器。它不校验输入、不移除不需要的标签,也无法拆除 javascript: 这类危险 URL。如果你需要渲染不可信 HTML 而不是把它当文本显示,请把转义和专门的净化库配合使用。经验法则是:展示代码或用户文本时用转义,必须真正插入标记时用净化。

适用场景

技术写作者用它来在博客和文档里展示 HTML、XML、SVG 样例。开发者在渲染用户提交的文本前先做转义。模板作者保护插入 HTML 邮件里的动态值。还有任何人需要解码从遗留系统或过度转义的 CMS 里复制来的、满是实体的乱码文本。

相关工具

常见问题

安全模式到底转义哪些字符,完整模式又多了什么?

安全模式只替换五个字符:与号、小于号、大于号、双引号和单引号。完整模式先转义同样这五个,再把其余所有小于 U+0020 或大于 U+007E 的字符转换成十进制数字引用,因此结果是纯 ASCII。

为什么完整模式的输出变成了一串 &#NNN; 编码?

这是预期行为。完整模式把每个非 ASCII 字符表示成它的十进制 Unicode 码点,所以一个重音字母或货币符号会变成类似 &#233; 的形式。这让文本在未声明 UTF-8 字符集的页面或系统上仍能正确显示。

解码 &nbsp; 会得到不换行空格吗?

不会。这个解码器把 &nbsp; 映射成普通空格(U+0020),而不是不换行空格(U+00A0)。先解码再重新编码,并不会还原出原来的实体。

为什么编码已经编码过的文本会产生 &amp;lt;?

&lt; 里的与号本身也是安全模式要转义的字符,所以输入 &lt; 会变成 &amp;lt;。这就是重复编码:浏览器会显示字面文本 &lt;,而不是 < 字符。

完整模式能处理 emoji 和重音字母吗?

可以。完整模式按 Unicode 码点遍历字符串,所以一个 emoji 会作为单条数字引用(例如 &#128512;)输出,而不会被拆成两个代理项。

HTML 编码足以净化不可信 HTML 吗?

不够。转义这五个危险字符能阻止文本被当作标记解析,但它不校验输入、不剥离标签,也无法解除 javascript: 这类危险 URL。要渲染不可信标记,请使用专门的净化库。

由 HandyTools Hub 团队审校 · 最后更新