URL 编码解码在线工具 — 内置 URL 结构解析

什么是 URL 编码（百分号编码）？

// Encode a query parameter value
const param = encodeURIComponent('hello world & goodbye');
console.log(param); // → 'hello%20world%20%26%20goodbye'

// Encode a full URL (preserves structure)
const url = encodeURI('https://example.com/path name?q=hello world');
console.log(url); // → 'https://example.com/path%20name?q=hello%20world'

// Decode a percent-encoded string
const decoded = decodeURIComponent('hello%20world%20%26%20goodbye');
console.log(decoded); // → 'hello world & goodbye'

// Build a URL with encoded parameters
const base = 'https://api.example.com/search';
const query = `?q=${encodeURIComponent('你好')}&lang=zh`;
console.log(base + query); // → 'https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh'

核心功能

示例

https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den

https://example.com/search?q=hello world&lang=en

https://example.com/search?q=你好世界

https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

https://example.com/api?name=John Doe&role=admin&lang=en&sort=date desc

https://example.com/api?name=John%20Doe&role=admin&lang=en&sort=date%20desc

https://user:pass@example.com:8080/path/to/page?key=value&arr[]=1#section-2

https://user:pass@example.com:8080/path/to/page?key=value&arr%5B%5D=1#section-2

https://auth.example.com/authorize?redirect_uri=https://myapp.com/callback?code=abc&state=xyz

https://auth.example.com/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback%3Fcode%3Dabc%26state%3Dxyz

使用方法

1. 1

   输入 URL 或编码字符串

   在解码区域粘贴 URL 进行编码，或在编码区域粘贴百分号编码的字符串进行解码。根据用途选择 encodeURI 或 encodeURIComponent 模式。

2. 2

   查看结果和解析结构

   另一个区域会在您输入时即时更新。URL 解析器将 URL 分解为协议、主机、端口、路径、查询参数和片段——所有字段均可编辑。

3. 3

   复制或重建

   点击复制按钮复制编码或解码结果。编辑各个 URL 组件，然后点击重建按钮从修改后的部分构造新 URL。

常见错误

https://example.com/path%2520with%2520spaces

https://example.com/path%20with%20spaces

https://example.com/my+file+name.pdf

https://example.com/my%20file%20name.pdf

encodeURI('key=value&more')  → 'key=value&more' (& not encoded!)

encodeURIComponent('key=value&more')  → 'key%3Dvalue%26more'

Decoding %82%B1%82%F1 as UTF-8 (this is Shift-JIS for こん)

Using UTF-8: %E3%81%93%E3%82%93 correctly decodes to こん

encodeURIComponent('../images/photo.jpg')  → '..%2Fimages%2Fphoto.jpg'

Encode each segment: '../images/' + encodeURIComponent('my photo.jpg')

常见使用场景

调试乱码 URL

解码来自服务器日志、错误消息或浏览器开发者工具中的百分号编码 URL，读取原始的人类可读文本。

API 开发

为 REST API 调用编码查询参数值，确保 &、= 和空格等特殊字符不会破坏请求 URL。

OAuth 流程设置

在 OAuth 授权 URL 中正确编码 redirect_uri 和其他 URL 参数，防止认证失败。

国际化 URL

编码和解码包含中文、日文、韩文、阿拉伯文或其他非 ASCII 字符的 URL，用于国际化 Web 应用。

营销链接分析

解码来自电子邮件营销活动和广告平台的跟踪 URL，了解嵌入的 UTM 参数和重定向链。

URL 结构检查

将复杂 URL 解析为组件部分——协议、主机、端口、路径、查询参数和片段——用于分析和修改。

技术细节

RFC 3986 保留字符与非保留字符

RFC 3986 定义了永远不需要编码的非保留字符（A-Z、a-z、0-9、-、.、_、~），以及充当 URI 分隔符的保留字符（:、/、?、#、[、]、@、!、$、&、'、(、)、*、+、,、;、=），后者在用作数据时必须百分号编码。

UTF-8 字节编码流程

非 ASCII 字符首先转换为 Unicode 码点，然后编码为 UTF-8 字节（根据码点范围为 1-4 个字节），最后每个字节百分号编码为 %XX。例如：é（U+00E9）→ UTF-8 字节 C3 A9 → %C3%A9。emoji 🎉（U+1F389）→ UTF-8 字节 F0 9F 8E 89 → %F0%9F%8E%89。

URL 与 URI 术语

URI（统一资源标识符）是任何标识符字符串的通用术语。URL（统一资源定位符）是一种同时指定访问机制（如 https://）的 URI。RFC 3986 中的编码规则适用于所有 URI。JavaScript 的 API 使用 URI 术语（encodeURI、decodeURI），而日常用语更偏向使用 URL。

最佳实践

根据场景选择正确的模式

对单个查询参数的键和值使用 encodeURIComponent()。仅在有完整 URL 且想编码不安全字符而不破坏结构时使用 encodeURI()。对可能包含 &、= 或其他保留字符的参数值，绝不使用 encodeURI()。

避免双重编码

编码字符串之前，检查它是否已经被编码。查找现有的 % 序列。编码已编码的字符串会将 %20 变成 %2520，%3D 变成 %253D 等。如果不确定，先解码一次，再编码一次。

在服务器端解码

大多数 Web 框架在应用代码看到参数之前会自动解码 URL 参数。避免手动解码框架已经解码的参数——如果原始值包含字面百分号序列，这可能会导致问题。

为 OAuth 和 API 签名编码值

OAuth 1.0 签名基础字符串和许多 API 签名算法要求严格的 RFC 3986 百分号编码。使用 encodeURIComponent() 然后替换它未编码的剩余字符（如 !、'、(、)、*）为百分号编码等价物。

常见问题