HTML 实体编码 / 解码工具

将特殊字符转义为 HTML 实体,或将实体解码回纯文本,输入时实时更新。

编码所有非 ASCII 字符
同时转义带重音的字母和表情符号,而不仅仅是 < > & " '。

为什么会有 HTML 实体

有些字符被 HTML 本身保留。

<>& 这样的字符在 HTML 标记中具有特殊含义,直接在页面内容中输入它们可能会破坏页面,更糟糕的是,可能让用户输入被解释为可执行的标记。将它们编码为像 &lt; 这样的实体,可以安全地将该字符显示为纯文本。

命名实体 vs 数字实体

&amp;&#38; 都会解码为同一个 & 符号;命名实体是为常见字符设置的,数字实体(十进制或十六进制)则可以表示任意 Unicode 字符。此工具可以解码这两种形式。

工作原理

编码是一种简单的替换操作:正则表达式将五个 HTML 保留字符(&<>"')替换为对应的实体。「编码所有非 ASCII 字符」选项则更进一步,使用 codePointAt 将 ASCII 范围以外的每个字符都转换为数字引用,这在输出需要通过仅支持 ASCII 的旧邮件模板系统或会破坏 UTF-8 的配置文件时非常有用。

解码使用了一个值得了解的小技巧:将字符串赋值给一个未挂载的 <textarea>innerHTML,然后再从其 .value 读回结果。这把工作交给了浏览器自身的 HTML 解析器,它已经掌握了 2000 多个命名实体以及所有十进制和十六进制数字形式,因此该工具不需要内置一张可能过时的查找表。这也是为什么在这里解码不受信任的输入是安全的:textarea 的内容始终被当作纯文本处理,因此解码后的 &lt;script&gt; 只会变成一个 script 标签的文本内容,不会被执行。

两个方向都在这个页面的 JavaScript 中随每次按键实时运行。输入时打开开发者工具的 Network 标签页:不会有任何请求,你的标记内容永远不会离开浏览器。