HTML 转义工具

🛡️ HTML Escape

📐 工作原理与说明
把 HTML 特殊字符转义为实体,防止内容被当作标记解析。
  • 五字符:& < > " ' 是安全输出的最小集合。
  • 场景:把用户输入插入 HTML 文本节点或属性值前必须转义。
  • 上下文差异:JS 内联、CSS、URL 上下文需要各自的转义规则,HTML 转义不适用。
  • 补充:富文本场景需配合净化库,单靠转义无法覆盖所有 XSS 向量。
HTML 命名实体 &lt; &amp;
数字字符引用 &#60; &#38;
十六进制引用 &#x3C; &#x26;
JavaScript 转义 \" \\ \\n \\uXXXX
Unicode 转义 \u4e2d\u6587
URL 编码 %E4%B8%AD%E6%96%87
<div class="hello">Hello & "Welcome"!</div>

📦 批量处理

多行独立处理

Escape and unescape HTML entities in your browser so you can safely display <, > and & in code samples and pages.

📖 常用 HTML 实体对照表

点击实体可复制到剪贴板

📚 原理说明

什么是 HTML 实体转义?

HTML 实体转义是将特殊字符转换为 HTML 实体的过程,以确保这些字符在网页中正确显示而不被浏览器解析为 HTML 代码。

为什么需要转义?

• 防止 XSS 攻击:转义用户输入,避免恶意脚本注入
• 正确显示特殊字符:如 < > & 等在 HTML 中有特殊含义的字符
• 代码展示:在网页中显示 HTML/XML 源代码

三种实体格式

1. 命名实体:&lt;(可读性好,数量有限)
2. 数字字符引用(十进制):&#60;(支持所有 Unicode 字符)
3. 十六进制字符引用:&#x3C;(与 Unicode 码点对应)

JavaScript 转义

在 JavaScript 字符串中,特殊字符需要用反斜杠转义:
• \" 双引号
• \\ 反斜杠
• \n 换行符
• \t 制表符
• \uXXXX Unicode 字符

URL 编码

URL 中只能使用 ASCII 字符集。非 ASCII 字符和特殊字符需要使用百分号编码(Percent-encoding),格式为 %XX,其中 XX 是字符的十六进制值。

📋 历史记录

📚 深度解析:HTML 实体转义

💡 常见使用场景

  • 服务端模板输出用户内容前转义,防御 XSS。
  • 给邮件模板或日志兜一层转义:把用户昵称拼进 HTML 字符串前先转义,防止昵称里的标签破坏页面结构。
转义文本
输入 `a & b < c` → 输出 `a &amp; b &lt; c`。

❓ 常见问题(FAQ)

转义能完全防 XSS 吗?
对 HTML 文本上下文有效,属性/JS 上下文还需各自转义策略。
转义后中文会变成乱码吗?
不会。只转义五个危险字符(< > & " ')的方案完全不动其他字符,中文与 emoji 都原样保留。若出现 &#x4E2D; 这类形式,说明用的是全量编码模式;若出现问号或方块,则是字符集或输出编码的问题(未用 UTF-8),与转义无关。
⚠️ 使用说明与注意事项
📖关于「HTML 转义工具」 ▼

📝工具简介

HTML 转义工具。专为开发者打造的在线工具,纯前端运行,代码不离开浏览器。