HTML 实体转义

什么是 HTML 实体

HTML 实体（HTML Entities）是用于在 HTML 文档中表示保留字符和特殊符号的转义序列。因为 <、>、& 等字符在 HTML 中有语法含义，直接使用会导致解析错误，必须用实体形式替代。

常用实体速查

字符	实体名	数字实体
<	&lt;	&#60;
>	&gt;	&#62;
&	&amp;	&#38;
"	&quot;	&#34;
'	&#39;	&#39;
	&nbsp;	&#160;
©	&copy;	&#169;

为什么要转义：防止浏览器将 < > 解析为标签；防止 XSS——将用户输入插入 HTML 前必须转义。

React/Vue 的文本节点会自动转义；使用 innerHTML / dangerouslySetInnerHTML 时需手动处理。

常见使用场景

• 在网页中安全展示用户输入的内容，防止 XSS 攻击
• 在 HTML 中显示代码片段，避免 <script> 等标签被执行
• 插入特殊排版符号（如不换行空格  、版权符号 ©）
• 处理从数据库读取的含有 HTML 特殊字符的文本

使用方法

1. 在输入框中粘贴需要转义的原始文本，或需要反转义的 HTML 实体字符串
2. 选择操作方向：编码（转义为实体）或解码（还原为原始字符）
3. 输出区域实时显示结果，复制后可直接粘贴到代码或文档中

常见问题

命名实体和数字实体有什么区别？

命名实体（如 &）可读性好但并非所有字符都有命名形式；数字实体（如 &）可表示任意 Unicode 字符，兼容性更强。两者在浏览器中渲染效果完全相同。

React/Vue 中还需要手动转义吗？

使用 JSX 文本节点或模板插值时框架会自动转义，无需手动处理。但通过 dangerouslySetInnerHTML 或 v-html 插入 HTML 字符串时，必须自行确保内容已转义或经过消毒（sanitize）。

  和普通空格有什么区别？

普通空格会被 HTML 合并（多个连续空格只显示一个），且可以作为换行点。 （不换行空格）不会被合并，也不会在此处换行，适合需要精确控制间距的场景。