博客代码高亮
技术博主在 Markdown 编辑器中粘贴一段 Python 脚本，包含 for 循环和字典推导式。直接发布后，< 和 > 被浏览器解析为 HTML 标签，导致代码块内部分内容消失。用本工具将整段代码做转义处理，< 变为 <、> 变为 >，嵌入 <pre><code> 标签后，所有符号原样显示，读者可直接复制代码运行。
原文本 plain text
0 字符
HTML 实体 entities
0 字符
编辑「原文本」→ 实时转义；编辑「HTML 实体」→ 实时反转义
安全预览sandboxed render
常见实体速查 click to test · 反转义
就绪 · 输入文本或实体即时互转
第一节
关于本工具
About粘贴一段含 `<` 或 `&` 的代码到 Markdown 或 HTML 里，渲染出来全乱了——因为浏览器把尖括号当成了标签。这个工具把 `&`、`<`、`>`、`"`、`'` 分别转为 `&`、`<`、`>`、`"`、`'`，反过来也能把实体还原成原字符。处理过程在浏览器本地完成，内容不会离开设备，适合写博客时转码、或者从富文本编辑器里提取纯文本后还原。
使用场景
邮件签名防截断
销售总监在 Outlook 签名里插入了公司官网链接和 © 版权符号。发送给客户后，© 在部分邮件客户端中显示为乱码 ©，链接中的 & 被截断导致 404。将签名中的 &、<、> 统一转义为 &、<、>，确保所有客户端渲染一致，链接可点击。
API 文档参数说明
后端开发者在 Swagger 中编写 POST 接口文档，请求体示例包含 JSON 字符串，其中 value 字段值为 "a < b && c > d"。直接写入 YAML 后，< 和 && 被 Swagger UI 解析为 HTML 实体，文档页面上显示为 "a < b && c > d" 而非原始逻辑表达式。将示例值转义后写入 description 字段，文档展示与接口实际接收值完全一致。
论坛帖子防 XSS
社区管理员收到用户举报，某新注册账号在技术板块发帖，内容包含 <script>alert('xss')</script>。论坛编辑器未做输入过滤，该脚本会在其他用户浏览时弹出恶意窗口。管理员将整段代码复制到本工具转义，脚本标签变为纯文本 <script>alert('xss')</script>，替换原帖后页面安全，同时保留代码供管理员取证。
电商商品描述标签
运营专员在后台编辑一款显卡商品详情，标题含 "RTX 4060 < 4070" 的性能对比表述。保存后前端页面标题显示为 "RTX 4060 < 4070"，< 被解析为 HTML 标签起始，后续文字全部消失。将标题中的 < 和 > 转义后重新提交，标题正常显示为 "RTX 4060 < 4070"，且不影响 SEO 标题的 meta 标签。
对比矩阵
| 维度 | 本工具 | 在线转义站 | 手工替换 |
|---|---|---|---|
| 隐私 | 纯浏览器处理，内容不上传服务器 | 部分站点将内容发送至后端处理 | 完全本地，无网络交互 |
| 速度 | 即时转义，无网络延迟 | 依赖上传与响应，稍慢 | 手动逐字符替换，极慢 |
| 批量 | 支持一次性粘贴大段文本 | 多数有限制字符长度或需分段 | 仅适合少量字符 |
| 特殊字符覆盖 | 覆盖 HTML 全部 5 个预定义实体（& < > " '） | 部分仅转 & < >，遗漏引号 | 易遗漏或误转 |
| 逆向操作 | 同时支持实体→字符（反转义） | 部分仅单向转义 | 需手动反向查找 |
| 离线可用 | 完全离线，无网络也可使用 | 必须联网 | 无需网络，但需人工 |
第二节
使用指南
Getting Started使用步骤
- 1在输入框粘贴或键入含 & < > 的原始文本，右侧预览区同步显示转义后的实体编码
- 2点击「转义为实体」按钮，左侧输入框内容自动替换为转义结果，并高亮差异字符
- 3点击「反转义为原文」按钮，右侧预览区恢复原始文本，同时左侧输入框同步更新
- 4点击结果区任意位置的「复制」按钮，当前转义或反转义结果直接写入剪贴板
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| <script>alert('XSS')</script> | <script>alert('XSS')</script> | 常规：包含尖括号和单引号，验证最常用的 HTML 特殊字符转义，覆盖 < > 和单引号 |
| a & b < c > d " e ' f | a & b < c > d " e ' f | 常规：同时包含 & < > " ' 五种标准 HTML 实体，验证完整字符集转义 |
| 边界：空字符串输入，验证工具不会报错或产生多余输出 | ||
| 边界：纯空格，验证空格不会被转义（空格不是 HTML 特殊字符） | ||
| 中文 & 符号 | 中文 & 符号 | 边界：中文字符与特殊符号混合，验证非 ASCII 字符不受影响，仅转义 & |
| &<>"' | &amp;&lt;&gt;&quot;&#039; | 易错：输入已经是 HTML 实体编码，再次转义会双重编码，用户常误以为工具会解码 |
| 1 < 2 && 3 > 4 | 1 < 2 && 3 > 4 | 易错：连续两个 & 符号（逻辑与运算符），验证工具正确转义每个 & 为 &，不合并 |
常见错误对照
1.手动转义空格为 而非  
✗ 错误
一个空格写成 ✓ 修复
  或直接保留空格HTML 实体转义只处理 & < > " ' 五个字符，空格不在转义范围内。 是非换行空格实体，并非空格本身的转义结果，手动替换会改变排版语义。
2.遗漏 & 符号的转义顺序
✗ 错误
先转义 < 和 >，再转义 &——如 <a> 变成 <a>✓ 修复
必须最先转义 &，即 <a> 中的 & 应写成 &lt;a&gt;HTML 实体解析器以 & 开头、; 结尾。若 & 未转义，后续 < 和 > 的实体字符（如 <）会被解析器误认为新实体，导致双重转义或解析失败。
3.对中文或 UTF-8 字符做无意义转义
✗ 错误
将「你好」转义为 你好✓ 修复
保留原样「你好」HTML 转义只针对 & < > " ' 五个预定义实体。中文、日文等 Unicode 字符在 UTF-8 编码下可直接显示，无需数字实体表示；多余转义反而增加体积且无兼容性收益。
4.误用单引号实体 ' 代替 '
✗ 错误
转义单引号时写成 '✓ 修复
' 或直接保留 'HTML 4.01 标准未定义 ' 实体，仅 XHTML 和 HTML5 支持。在旧浏览器或 strict 文档类型下，' 会被解析为字面文本 '，失去转义作用。' 是通用数字实体，兼容所有版本。
5.重复转义已转义的字符串
✗ 错误
对 < 再次执行转义，变成 &lt;✓ 修复
只对原始文本执行一次转义转义是幂等操作：对已转义结果再次转义，会将实体中的 & 再次转为 &，生成 &lt; 这种双重编码，最终渲染时显示为 < 而非 <。
6.在属性值中未转义双引号
✗ 错误
<div class="test"data">✓ 修复
<div class="test"data">HTML 属性值用双引号包裹时，属性值内的双引号必须转义为 "，否则浏览器会将第二个双引号视为属性结束符，导致属性截断或解析错误。
第三节
工作原理
How It Works核心公式
字符 → 实体：& → & < → < > → > " → " ' → '
变量说明
&和号，转义为 &<小于号，转义为 <>大于号，转义为 >"双引号，转义为 "'单引号，转义为 '
示例
输入字符串：<div class="test">A & B</div>。逐个替换：< → <，> → >，" → "，& → &。结果：<div class="test">A & B</div>。
用户输入
本地处理
输出结果
第四节
开发者集成
For Developers6 种主流语言实现，复制即用：
import html
# 示例：转义特殊字符
raw = '<script>alert("xss") & more</script>'
escaped = html.escape(raw, quote=True)
print(escaped)
# 输出: <script>alert('xss') & more</script>// 浏览器环境：使用原生 DOM 方法
function escapeHtml(str) {
const el = document.createElement('span');
el.textContent = str;
return el.innerHTML;
}
console.log(escapeHtml('<b>"hello" & world</b>'));
// 输出: <b>"hello" & world</b>package main
import (
"fmt"
"html"
)
func main() {
raw := `<a href="test">Tom & Jerry</a>`
escaped := html.EscapeString(raw)
fmt.Println(escaped)
// 输出: <a href="test">Tom & Jerry</a>
}# 使用 sed 进行简单转义（仅处理 & < > " '）
escape_html() {
local s="$1"
s="${s//&/&}"
s="${s//</<}"
s="${s//>/>}"
s="${s//\"/"}"
s="${s//\'/'}"
echo "$s"
}
escape_html '<b>"hello" & world</b>'
# 输出: <b>"hello" & world</b>import org.apache.commons.text.StringEscapeUtils;
public class HtmlEscape {
public static void main(String[] args) {
String raw = "<div>price < $10 & discount</div>";
String escaped = StringEscapeUtils.escapeHtml4(raw);
System.out.println(escaped);
// 输出: <div>price < $10 & discount</div>
}
}<?php
$raw = '<b>"hello" & world</b>';
$escaped = htmlspecialchars($raw, ENT_QUOTES | ENT_HTML5, 'UTF-8');
echo $escaped;
// 输出: <b>"hello" & world</b>
?>第五节
常见问题
Q & A问我直接把文章里的特殊符号贴进去转义，为什么转出来有些符号没变？＋
答
本工具只转义 HTML 实体中必须转义的五个字符：&、<、>、"（双引号）、'（单引号）。其他符号如中文全角符号、版权符号 ©、注册商标 ® 等，在 HTML 中不是必须转义的，所以工具不会处理它们。如果你需要转换这些符号，那是另一类工具（字符实体转换），本工具不涉及。
问转义后的结果我直接放到网页里，为什么显示还是不对？＋
答
检查两点。第一，确认原始内容里是否混入了已经转义过的实体（比如 &），本工具会把 & 再转成 &amp;，导致双重转义。第二，如果你把转义结果放在 <script> 或 <style> 标签内，规则不同——这些标签里不需要转义 HTML 实体，反而会被错误解析。本工具只适用于 HTML 标签内的文本内容。
问这个工具和网上那些在线 HTML 转义工具有什么区别？＋
答
核心区别是全部在浏览器本地运行，不上传任何数据。很多同类工具需要把文本发到服务器处理，而本工具用 JavaScript 在本地完成转义和反转义，输入内容不会离开你的电脑。另外本工具同时支持正向转义（文本→实体）和反向转义（实体→文本），两个方向在同一个界面切换，不需要找两个工具。
问为什么我粘贴一段包含中文的代码，转义后中文变成乱码了？＋
答
本工具只处理 HTML 实体转义，不会改变中文字符本身。如果转义后中文显示乱码，大概率是原始文本的编码问题（比如 GBK 编码的文本被粘贴到 UTF-8 环境）。建议先确认原始文本的编码，用记事本另存为 UTF-8 后再粘贴。本工具本身不涉及编码转换，它只是原样保留非实体字符。
问我有一大段代码要转义，这个工具一次能处理多少内容？＋
答
没有硬性字数限制，完全取决于浏览器性能。因为处理在本地进行，浏览器会一次性处理你粘贴的全部文本。实测几万字的文本在主流浏览器上都能秒级完成。但如果文本量极大（比如几十万字），浏览器可能会卡顿甚至提示脚本无响应——这时建议分批处理。
问反转义的时候，为什么有些实体（比如 ©）没有转回原来的符号？＋
答
本工具的反转义功能支持所有标准 HTML 命名实体（如 & → &）和数字实体（如 © → ©）。如果遇到无法转换的情况，通常是因为该实体拼写错误（比如 &cop; 少了 y），或者使用了浏览器不支持的实体名称。建议先确认实体写法是否符合 HTML5 规范。
问这个工具离线能用吗？＋
答
能。因为所有处理逻辑都是 JavaScript 在浏览器本地执行，不需要联网请求服务器。只要第一次加载过页面（浏览器缓存了页面资源），断网后仍然可以正常使用。如果你需要完全离线使用，可以把页面加入浏览器书签或保存为本地 HTML 文件。
问转义后的结果怎么复制出来用？＋
答
结果区域可以直接鼠标选中文本复制（Ctrl+C 或右键复制）。部分浏览器在结果区提供了「一键复制」按钮，点击即可自动复制到剪贴板。如果复制后粘贴发现内容变了，检查是否粘贴到了富文本编辑器（如 Word、邮件客户端），它们可能会自动反转义。建议粘贴到纯文本编辑器（如记事本）中确认原始内容。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。