HTML 实体编解码的核心原理

HTML 实体编解码是网页开发中不可或缺的基础技术。 编码（Encoding） 是将具有特殊含义的字符（如 < , > , & ）转换为其对应的 HTML 实体代码的过程。 解码（Decoding） 则是将这些代码还原为原始字符的过程。

这种机制确保了字符在浏览器中能够按预期渲染，而不会被解析为 HTML 指令。例如，如果不进行编码，浏览器会将 <script> 解析为一个脚本标签并尝试执行它，而不是将其显示为纯文本。

编码 vs 解码：应用场景分析

1. 数据存储与传输

在将用户提交的内容（如评论、留言）存入数据库之前，通常需要进行 HTML 编码。这不仅能防止存储时的格式冲突，还能确保在后续多平台（如 App、小程序）调用数据时保持一致性。

2. 动态内容展示

当您在页面上动态显示来自不可信来源的数据时，必须进行解码或编码处理。如果您想显示源码，请使用编码；如果您想显示已转义的格式化内容，请使用解码。

安全性：使用编解码预防 XSS 攻击

跨站脚本攻击（XSS）是 Web 安全中最常见的漏洞之一。攻击者通过在页面注入恶意脚本来窃取用户信息。转义是防御 XSS 的第一道防线。通过将 < 转换为 < ，攻击脚本将变成一段无害的字符串，从而彻底消除执行风险。

常见问题：为什么有些字符解码后还是乱码？

乱码问题通常与 字符编码（Charset） 有关。虽然 HTML 实体提供了一种独立于编码的表示方式，但如果您的页面声明的是 UTF-8 而实体来自 ISO-8859-1 范围之外且未正确表示，可能会出现显示异常。确保您的 <meta charset="UTF-8"> 声明正确，并优先使用命名的 HTML 实体（如 © ）而非数字编号。

JavaScript 中的编解码实现方案

在前端开发中，您可以使用多种方式实现编解码：

DOM 方式： 利用临时创建一个 div 元素的 innerText 或 textContent 属性。这是最简单、兼容性最好的方法。
正则表达式： 针对特定的核心字符（如 & , < , > ）进行手动替换。
现代 API： 使用 DOMParser 进行更严谨的解码处理，这也是本工具采用的方案。

HTML 实体编解码