如何转义与反转义 HTML/URL/JavaScript 等字符串

为什么有用

想象把顾客评价粘进 feeds 网页 Banner 用的 JSON 配置，评价里多了一个 "。打包成功、上线后首页却冒出 Uncaught SyntaxError。修复很简单——给引号转义——但关键是要知道*该用哪种转义（HTML 实体？JSON 的 \"？URL 的 %22？）。本工具把常见形式集中一处，减少对 Stack Overflow RegEx 的复制粘贴猜测。

三类真实场景

前端开发

在静态 HTML 中安全嵌入用户内容

把 <script> 转成 <script>，浏览器显示字面文本而非执行脚本。

降低 XSS 与渲染崩坏风险

后端工程师

拼接含特殊字符的查询字符串

将 name=O'Hara URL 编码为 name=O%27Hara 再拼到 URL 上。

可调通的 API

数据工程师

导入含嵌入逗号与引号的 CSV

字段加引号并将内部引号加倍——CSV 模式可自动完成。

干净导入

操作演示

打开文本转义/反转义。

粘贴原始输入
左侧保留原文，右侧显示转义结果。
选择目标格式
HTML、URL、JavaScript / JSON、CSV 或 XML。规则各不相同。请按字符串落地处选模式，而不是按来源。
切换转义 / 反转义
若拿到的是已转义串、要还原成原文（例如调试 JSON 编码的日志行），请用反转义。
复制安全字符串
将结果粘进代码、配置或 API 调用。

HTML 转义可防止标签与符号破坏结构

原文

<a href="x">Hi & welcome</a>

HTML 转义

&lt;a href=&quot;x&quot;&gt;Hi &amp; welcome&lt;/a&gt;

JSON 字符串字面量风格的 JavaScript 转义

原文

She said "hi"	on Tuesday — line break
follows.

JS 转义

She said \"hi\"\ton Tuesday \u2014 line break\nfollows.

转义模式选择：HTML / URL / JS / CSV / XML — 切换模式后右栏会实时重算。

实用技巧

只在需要时转义。 若目标是 DOM 节点的 textContent，浏览器已代你处理；双重转义是最常见 bug 之一。
URL 查询串请分别编码各个取值。 不要整段 URL 一起编码，否则合法的 =、& 也会被编码。
JSON ≠ JavaScript： JS 字符串可用单引号，JSON 不行。选择与目标格式一致的 JS/JSON 配置。
往返自检： 先转义再反转义，应得到原文；若不是，说明输入含控制字符，需先做更强清洗。

常见陷阱

常见误区

双重转义：`&` 而非 `&`

你对已转义文本又做了一次转义。反转义先确认输入是否为「原文」，再对目标做一次转义。

常见误区

Unicode 在文件里变成字面 `\u00XX`

部分下游工具（旧版 PHP、某些 SQL 驱动）不识别 \uXXXX。可改用 URL 模式（UTF-8 百分比编码），或存储原始 UTF-8 仅在输出时再转义。

常见误区

CSV：引号字段里的制表符

CSV 规则只双倍内部引号；制表符与换行在引号内可原样通过。若导入器靠制表符/换行列数计数，请改分隔符（如 ;）或对每字段都加引号。

什么情况不该用这个工具

带允许标签的 HTML 净化（如博客评论）应使用 DOMPurify 等完整 HTML 消毒器，而不是一律转义全文。
SQL 绑定参数应由驱动参数化查询处理，不靠字符串层「手工转义」。
Shell 参数转义因 shell 而异（bash vs cmd.exe）。请用语言内置如 shlex 一类工具。

常见问题

encodeURI 与 encodeURIComponent 有何区别？

encodeURI 保留 :, /, ? 等 URL 保留字符。encodeURIComponent（本工具 URL 配置的默认行为）会把它们一并编码——适合编码「单个取值」而非整条 URL。

表情符号会保留吗？

会。各配置会正确处理多字节 UTF-8（URL 如 %F0%9F%98%80，JS 则可能用代理对 \uD83D\uDE00）。

文本会被发送到别处吗？

不会。转义在本地运行，结果不出浏览器。

后续可以做什么

转义后可用文本对比教程思路，与原文做 sanity check。
内嵌 JSON 可用文本格式化整理可读性。
若为二进制数据编码（非文本），请用 Base64/Hex 编解码。

为什么有用

三类真实场景

前端开发

在静态 HTML 中安全嵌入用户内容

把 <script> 转成 <script>，浏览器显示字面文本而非执行脚本。

降低 XSS 与渲染崩坏风险

后端工程师

拼接含特殊字符的查询字符串

将 name=O'Hara URL 编码为 name=O%27Hara 再拼到 URL 上。

可调通的 API

数据工程师

导入含嵌入逗号与引号的 CSV

字段加引号并将内部引号加倍——CSV 模式可自动完成。

干净导入

操作演示

打开文本转义/反转义。

粘贴原始输入
左侧保留原文，右侧显示转义结果。
选择目标格式
HTML、URL、JavaScript / JSON、CSV 或 XML。规则各不相同。请按字符串落地处选模式，而不是按来源。
切换转义 / 反转义
若拿到的是已转义串、要还原成原文（例如调试 JSON 编码的日志行），请用反转义。
复制安全字符串
将结果粘进代码、配置或 API 调用。

HTML 转义可防止标签与符号破坏结构

原文

<a href="x">Hi & welcome</a>

HTML 转义

&lt;a href=&quot;x&quot;&gt;Hi &amp; welcome&lt;/a&gt;

JSON 字符串字面量风格的 JavaScript 转义

原文

She said "hi"	on Tuesday — line break
follows.

JS 转义

She said \"hi\"\ton Tuesday \u2014 line break\nfollows.

实用技巧

只在需要时转义。 若目标是 DOM 节点的 textContent，浏览器已代你处理；双重转义是最常见 bug 之一。
URL 查询串请分别编码各个取值。 不要整段 URL 一起编码，否则合法的 =、& 也会被编码。
JSON ≠ JavaScript： JS 字符串可用单引号，JSON 不行。选择与目标格式一致的 JS/JSON 配置。
往返自检： 先转义再反转义，应得到原文；若不是，说明输入含控制字符，需先做更强清洗。

常见陷阱

常见误区

双重转义：`&` 而非 `&`

你对已转义文本又做了一次转义。反转义先确认输入是否为「原文」，再对目标做一次转义。

常见误区

Unicode 在文件里变成字面 `\u00XX`

部分下游工具（旧版 PHP、某些 SQL 驱动）不识别 \uXXXX。可改用 URL 模式（UTF-8 百分比编码），或存储原始 UTF-8 仅在输出时再转义。

常见误区

CSV：引号字段里的制表符

CSV 规则只双倍内部引号；制表符与换行在引号内可原样通过。若导入器靠制表符/换行列数计数，请改分隔符（如 ;）或对每字段都加引号。

什么情况不该用这个工具

带允许标签的 HTML 净化（如博客评论）应使用 DOMPurify 等完整 HTML 消毒器，而不是一律转义全文。
SQL 绑定参数应由驱动参数化查询处理，不靠字符串层「手工转义」。
Shell 参数转义因 shell 而异（bash vs cmd.exe）。请用语言内置如 shlex 一类工具。

常见问题

encodeURI 与 encodeURIComponent 有何区别？

encodeURI 保留 :, /, ? 等 URL 保留字符。encodeURIComponent（本工具 URL 配置的默认行为）会把它们一并编码——适合编码「单个取值」而非整条 URL。

表情符号会保留吗？

会。各配置会正确处理多字节 UTF-8（URL 如 %F0%9F%98%80，JS 则可能用代理对 \uD83D\uDE00）。

文本会被发送到别处吗？

不会。转义在本地运行，结果不出浏览器。

后续可以做什么

转义后可用文本对比教程思路，与原文做 sanity check。
内嵌 JSON 可用文本格式化整理可读性。
若为二进制数据编码（非文本），请用 Base64/Hex 编解码。