🔣 HTML实体编码/解码器

什么是HTML实体编码器？

HTML实体编码器是一种将特殊字符转换为HTML实体（HTML Entities）的在线工具。在HTML中，某些字符具有特殊含义：<和>用于标记标签，&用于实体引用，引号用于属性值界定。如果需要在页面中显示这些字符本身，或者在HTML中嵌入包含这些字符的文本内容，就必须使用HTML实体进行转义。例如，<符号需要写成&lt;，&符号需要写成&amp;。此外，许多非ASCII字符（如中文标点、数学符号、emoji等）也可以用实体编码表示。本工具支持编码和解码双向操作，帮助开发者正确处理HTML中的特殊字符。

如何使用HTML实体编码器

1. 输入文本 — 填入需要编码的原始文本或需要解码的HTML实体字符串。
2. 选择操作 — 选择"编码"将特殊字符转为实体，或"解码"将实体还原为字符。
3. 选择编码方式 — 可选择命名实体（&lt;）或数字实体（十进制&#60;或十六进制&#x3C;）。

常见使用场景

技术原理

HTML实体有三种表示形式：

// 三种HTML实体形式
// 1. 命名实体（最易读）
< → &lt;    > → &gt;    & → &amp;
" → &quot;   ' → &apos;

// 2. 十进制数字实体
< → &#60;   > → &#62;   & → &#38;

// 3. 十六进制数字实体
< → &#x3C;  > → &#x3E;  & → &#x26;

// JavaScript中的编码/解码
function encodeHTML(str) {
    return str.replace(/[&<>"']/g, char => {
        const entities = {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&apos;'};
        return entities[char];
    });
}

// 解码（安全方式，不直接使用innerHTML）
function decodeHTML(str) {
    const textarea = document.createElement('textarea');
    textarea.innerHTML = str;
    return textarea.value;
}

最佳实践与注意事项

• 在将用户输入插入HTML之前，务必进行实体编码，这是防止XSS攻击的基本措施。
• 在HTML属性值中，引号必须编码（&quot;），否则可能破坏属性结构。
• 不要对已经是HTML实体的文本重复编码，否则&lt;会变成&amp;lt;。
• 在现代前端框架（React、Vue）中，默认会对插值内容进行转义，通常不需要手动编码。

常见问题