HTML 实体转义

HTML 实体转义工具

这是 HyperGrad Text 提供的免费 HTML 实体转义工具，支持 HTML、JSX、JS 字符串、URL 编码四种类型双向转义（encode/decode）， 完整处理 & < > " ' / 以及所有命名实体。所有处理在浏览器本地完成，不上传服务器， 适合前端开发、模板编写、XSS 防护、URL 字符串拼接等场景。

四种转义类型

• HTML 转义：把 & < > " ' / 转为 &amp; &lt; &gt; &quot; &#39; &#47;，让浏览器把这些字符当文本而非 HTML 标签解析，防 XSS。
• JSX 转义：比 HTML 多转义 { 和 }（因为 JSX 用大括号表示表达式），转义为 &#123; / &#125;，避免 JSX 解析器把模板中的大括号当表达式。
• JS 字符串：转义为 JS 字符串字面量内容，\\ \" \n \r \t 等，用于把多行文本安全嵌入 JS 字符串。
• URL 编码：encodeURIComponent，把空格/中文/特殊字符转为 %20/%E4%B8%AD，用于 URL 参数拼接。

HTML 转义 vs URL 编码

两者容易混淆：HTML 转义是让字符在「HTML 文档里」安全显示（<script> → &lt;script&gt;），防止浏览器把文字当标签执行； URL 编码是让字符在「URL 里」安全传递（空格 → %20，中文 → %E4%B8%AD），防止 URL 解析错误。 场景完全不同，本工具可在同一界面切换。

反转义智能识别

反向转义（decode）时工具会智能识别已有实体。例如输入 &lt;a&gt;&amp;b 会还原为 <a>&b。 但正向转义（encode）不识别已转义的内容——会再次转义。这是安全默认行为，避免漏转导致 XSS。

常见踩坑场景

• 用户输入直接 innerHTML 渲染 → 必须先 HTML 转义，否则 <script> 会被执行。
• 模板字面量里写 ${userInput} → 若内容含反引号会破坏模板，需 JS 字符串转义。
• URL 里拼接中文参数 → 必须 encodeURIComponent，否则部分浏览器报错。
• JSX 组件里展示 { } 字符 → 必须转义为 {'{'} 表达式或 &#123; HTML 实体。