HTML 实体编码解码工具

HTML 实体编码是一种将特殊字符转换为特定字符串表示的方法。在 HTML 中，某些字符（如 <、>、&）具有特殊含义，直接使用会被浏览器解析为标签或语法结构。通过实体编码（如 < 表示 <），可以安全地在页面中显示这些字符，同时也能有效防止 XSS（跨站脚本）攻击。简而言之，实体编码让特殊字符得以安全地在 HTML 文档中展示。

HTML 实体主要有三种类型：
1. 命名实体：使用预定义的名称，如 &（表示 &）、<（表示 <）、©（表示 ©），易于记忆和阅读；
2. 十进制数字实体：使用 &#xxx; 格式，其中 xxx 是字符的 Unicode 十进制码点，如 < 表示 <；
3. 十六进制数字实体：使用 &#xXXX; 格式，其中 XXX 是字符的 Unicode 十六进制码点，如 < 表示 <。数字实体的优势在于可以表示任何 Unicode 字符。

命名实体适合常用字符（如 &、<、>、© 等），因为可读性好，便于代码维护。但命名实体仅覆盖约 2000 多个字符，对于大多数 Unicode 字符（如中文、emoji 等）并没有对应的命名实体。
数字实体则能表示 所有 Unicode 字符（超过 14 万个），适用范围更广。如果你的内容包含大量非 ASCII 字符（如中文、日文、阿拉伯文等），数字实体是唯一可行的选择。十六进制格式在 Web 开发中更为常见，因为 Unicode 码点通常以十六进制表示。

HTML 实体编码是防御 XSS 攻击的重要手段之一，但并非万能。对用户输入进行实体编码可以防止恶意脚本被浏览器执行（如 <script> 被编码为 <script>）。然而，上下文很重要：在 HTML 属性、JavaScript 代码块、CSS 或 URL 中，需要采用不同的编码策略。最佳实践是结合使用内容安全策略（CSP）、输入验证、输出编码等多层防护措施。

 （Non-Breaking SPace，不间断空格，Unicode U+00A0）与普通空格（U+0020）的主要区别在于：不间断空格会阻止浏览器在该位置自动换行。这意味着包含   的两个单词始终会保持在同一行。它常用于需要保持完整性的数值与单位之间（如 "10 km"）、品牌名称等场景。普通空格则允许浏览器根据布局需要在此处换行。

HTML 实体编码用于在 HTML 文档中安全显示特殊字符，格式为 &xxx; 或 &#xxx;（如 < 表示 <）。
URL 编码（百分号编码）用于在 URL 中安全传输数据，格式为 %XX（如 %3C 表示 <）。
两者的应用场景不同：HTML 实体编码用于网页内容，URL 编码用于网址和查询参数。例如，空格在 HTML 实体中可表示为   或  ，在 URL 中则编码为 %20 或 +。

在 JavaScript 中，可以使用以下方法：
编码：使用 text.replace(/[<>"'&]/g, char => ({...})[char]) 或创建 DOM 元素利用浏览器能力；
解码：创建一个临时的 textarea 元素，设置其 innerHTML 为实体文本，再读取其 value 即可获得解码结果。例如：
const txt = document.createElement('textarea'); txt.innerHTML = encodedStr; return txt.value;
不过使用本工具更便捷，无需编写代码即可完成批量转换！

这通常是因为实体被多次编码导致的。例如 & 在 HTML 中会被渲染为 & 文本，但如果你的源代码写的是 &，浏览器会将其解析为 & 显示在页面上，而不是期望的 & 符号。解决方法是检查你的数据流，确保只进行了一次编码。使用本工具的"解码"功能可以逐层还原实体。

最核心的 5 个 HTML 实体，每个开发者都应该熟记：
1. & → &（和号）
2. < → <（小于号）
3. > → >（大于号）
4. " → "（双引号）
5. ' 或 ' → '（单引号）
另外  （不间断空格）和 ©（版权符号 ©）也非常常用。熟练掌握这几个实体可以解决日常开发中 90% 以上的编码需求。

本工具的解码功能全面支持三种 HTML 实体格式：
1. 命名实体：如 &、<、©、€ 等所有标准 HTML 命名实体；
2. 十进制数字实体：如 <、©、中（中文"中"字）；
3. 十六进制数字实体：如 <、©、中。
支持混合使用多种格式的文本一次性解码，且对于无效或无法识别的实体格式会保持原样，不会损坏数据。