MT
My Toolbox

URL 编解码工具 — 在线编码/解码 URL 特殊字符

粘贴含特殊字符的 URL 立刻得到百分号编码版本，或者把一堆 %20%3F 解码回可读文本。用的是浏览器内置的 encodeURIComponent/decodeURIComponent，数据不出浏览器。

输入文本
输入文本
输入要编码的 URL
编码输出
编码输出
编码和解码 URL 字符串

URL Encoding converts special characters into a format that can be transmitted over the internet.

For example, spaces become %20, and other special characters like &, =, and ? are also encoded.

This tool uses encodeURIComponent() anddecodeURIComponent() functions, which encode all characters except:

  • Alphabetic characters (A-Z, a-z)
  • Digits (0-9)
  • Special characters: - _ . ! ~ * ' ( )

URL 编码的工作原理（RFC 3986）

URL 只能包含有限的 ASCII 字符集。超出范围的（空格、中文、作为数据使用的保留分隔符）都必须"百分号编码"：一个 % 加两位十六进制数表示字节值。空格变成 %20，查询值中的斜杠变成 %2F，中文字符"你"变成 %E4%BD%A0（三个 UTF-8 字节）。

这不是可选的。如果你在查询参数值里放一个原始的 &，服务器会把它当成参数分隔符而不是数据。我调过不下十几次这个 bug：API 返回"缺少参数"，原因是有人忘了编码公司名里的 &，比如"张三 & 李四"。

规范（RFC 3986 第 2.1 节）定义了"非保留字符"，永远不需要编码：A-Z、a-z、0-9 和 - _ . ~。其他字符要么是保留的（在 URL 中有特殊含义），要么必须编码。麻烦的地方：是否编码保留字符取决于上下文。路径中的 / 是分隔符，但查询参数值中的 / 是数据，必须编码为 %2F。

使用方法

  1. 选择编码或解码模式。
  2. 粘贴或输入文本：完整 URL、查询参数值、或已编码的字符串。
  3. 结果随输入实时更新，一键复制。
  4. 编码时只粘贴值的部分（不是整个 URL），避免把 URL 结构也编码了。

什么时候会用到

用用户输入构建查询字符串

用户搜索"鞋子 & 包包"，如果不编码那个 &，服务器会把它拆成两个参数。encodeURIComponent("鞋子 & 包包") 得到安全的编码字符串，可以直接放进 ?q= 里。

调试 OAuth 和重定向 URL

OAuth 流程把 redirect_uri 作为查询参数传递。那个 URI 本身包含 ? 和 & 字符。你需要编码整个重定向 URL 让它作为单个参数值安全传输。这里的双重编码 bug 会导致"invalid redirect_uri"错误，排查起来很痛苦。

解码追踪链接和 UTM 参数

营销工具生成的 URL 里 UTM 参数都是编码过的，肉眼看不懂。把完整 URL 粘贴进来，直接看 utm_campaign、utm_source 到底写的什么，不用手动解析 %20 和 %3D。

在 URL 参数中传递 JSON 或特殊数据

有些 API 在查询字符串里接受 JSON（不好的实践，但确实存在）。{ } " 这些字符都需要编码。这个工具让你在硬编码之前看到编码后的样子。

常见坑点

1.

不要编码整个 URL，只编码值

encodeURIComponent("https://example.com/path?q=hello") 会把 :// 和 ? 也编码掉，URL 结构就废了。编码单个参数值，不是整个 URL。需要编码完整 URL 同时保留结构的话用 encodeURI()。

2.

小心双重编码

如果值已经编码了（%20），再编码一次 %20 就变成 %2520（% 被编码成了 %25）。这是 URL 处理代码里我见过最多的 bug。替换前先检查你的框架是不是已经自动编码了。

3.

+ 和 %20 都表示空格，要分清

在查询字符串（application/x-www-form-urlencoded）里，+ 表示空格。在路径段里，只有 %20 有效。JavaScript 的 encodeURIComponent 永远用 %20。如果你在解码时看到 +，可能需要先把 + 替换成空格，decodeURIComponent 不会自动做这件事。

4.

UTF-8 编码在百分号编码之前发生

字符 é 先被编码为 UTF-8 字节（0xC3 0xA9），然后每个字节百分号编码（%C3%A9）。如果你的系统用 Latin-1 而不是 UTF-8，你会得到 %E9，一个字节而不是两个。这种不匹配会导致乱码。永远用 UTF-8。

示例

编码含特殊字符的搜索词

用户搜索"C++ tutorials & guides"，三个特殊字符都需要编码。

Input

C++ tutorials & guides

Output

C%2B%2B%20tutorials%20%26%20guides

解码追踪 URL 参数

营销 URL 里包含编码过的重定向地址，解码看看它实际指向哪里。

Input

https%3A%2F%2Fexample.com%2Flanding%3Futm_source%3Dnewsletter%26utm_campaign%3Dspring

Output

https://example.com/landing?utm_source=newsletter&utm_campaign=spring

功能特点

  • 编码和解码模式即时切换
  • 使用标准 encodeURIComponent/decodeURIComponent，和浏览器行为一致
  • 支持 Unicode、emoji 和多字节字符，粘贴就能用
  • 输入时实时显示结果，不需要点按钮
  • 一键复制到剪贴板
  • 你的数据留在浏览器里，零网络请求，不收集任何信息

常见问题

encodeURI() 和 encodeURIComponent() 到底有什么区别？

encodeURI() 用于编码完整 URL，它不动 :、/、?、# 和 & 因为这些是结构性的。encodeURIComponent() 编码除 A-Z、0-9 和 - _ . ! ~ * ' ( ) 之外的所有字符。实际开发中你几乎总是要用 encodeURIComponent()，因为你是在编码一个值放进 URL 里，而不是编码 URL 本身。

为什么参数值里有 & 或 = 就会出问题？

因为 & 是参数分隔符，= 是键值分隔符。如果你的值里有这些字符，解析器会在那里切割。编码值："Tom & Jerry" 变成 "Tom%20%26%20Jerry"。现在解析器看到的是一个参数里有个编码过的 &，而不是两个独立参数。

空格该用 %20 还是 +？

看上下文。在 application/x-www-form-urlencoded 的查询字符串里（HTML 表单），+ 表示空格。在 URL 路径段和其他上下文里，只有 %20 有效。JavaScript 的 encodeURIComponent() 永远产生 %20。大多数服务器在查询字符串里两种都接受，但如果你在构建路径段，用 %20。

Unicode 字符（emoji、中文）怎么编码？

字符先转换为 UTF-8 字节，然后每个字节百分号编码。emoji 🎉 是 4 个 UTF-8 字节：F0 9F 8E 89，所以变成 %F0%9F%8E%89。中文"中"是 3 个字节：E4 B8 AD → %E4%B8%AD。这个工具自动处理所有这些，粘贴就行。

什么是双重编码，怎么修？

双重编码是对已编码的字符串再编码一次。%20 变成 %2520，因为 % 被编码成了 %25。常见原因：框架自动编码了，你又手动调了 encodeURIComponent()。修复：先解码（拿到原始值），再编码一次。或者检查你的 HTTP 库是否已经处理了编码（大多数都会，axios、fetch 配合 URLSearchParams 等）。

使用技巧与相关工作流