URL 编解码

This content is not available in your language yet.

URL 编解码工具 🔗

专业的 URL 编码和解码工具，支持多种编码格式和场景。

什么是 URL 编码？

URL 编码（百分号编码）是一种编码机制，用于在 URI 中编码特殊字符。因为 URL 只能使用 ASCII 字符集的有限子集，非 ASCII 字符和特殊字符需要编码后才能使用。

编码规则

字母、数字和 - _ . ~ 不编码
空格编码为 +（表单数据）或 %20（URL）
其他字符编码为 % 后跟两位十六进制数

示例：

原始: Hello 世界!
编码: Hello%20%E4%B8%96%E7%95%8C!

功能特点

🌐 完整 URL 编解码 - 处理整个 URL
🔤 URI 组件编解码 - 处理 URL 参数值
📋 表单数据编码 - application/x-www-form-urlencoded
🎯 批量处理 - 同时处理多个 URL
🔄 自动识别 - 智能判断编码/解码
📊 编码分析 - 显示编码详情

快速开始

URL 编码

输入要编码的文本：

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

选择编码类型：
- 完整 URL - 编码整个 URL
- URI 组件 - 只编码参数值
获取编码结果：

完整 URL: https://example.com/search?q=Hello%20%E4%B8%96%E7%95%8C
URI 组件: Hello%20%E4%B8%96%E7%95%8C

URL 解码

粘贴编码后的 URL：

https://example.com/search?q=Hello%20%E4%B8%96%E7%95%8C

点击「解码」按钮
查看解码结果：

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

功能详解

1. 完整 URL 编解码

处理整个 URL，保留协议、域名、路径结构，只编码查询参数：

编码前：

https://example.com/path/to/page?name=张三&age=25&city=北京

编码后：

https://example.com/path/to/page?name=%E5%BC%A0%E4%B8%89&age=25&city=%E5%8C%97%E4%BA%AC

适用场景：

在地址栏分享带参数的 URL
生成可点击的链接
处理包含中文的 URL

2. URI 组件编解码

只编码 URL 中的某个组件（如参数值）：

// JavaScript 中的对应方法
encodeURIComponent('Hello 世界!');
// 结果: "Hello%20%E4%B8%96!"

decodeURIComponent('Hello%20%E4%B8%96!');
// 结果: "Hello 世界!"

与 encodeURI 的区别：

方法	编码范围	示例
`encodeURI`	不编码 `; , / ? : @ & = + $ #`	用于完整 URL
`encodeURIComponent`	编码所有特殊字符	用于 URL 参数

示例对比：

const url = "https://example.com/path?key=value";

encodeURI(url);
// "https://example.com/path?key=value" (不变)

encodeURIComponent(url);
// "https%3A%2F%2Fexample.com%2Fpath%3Fkey%3Dvalue" (全部编码)

3. 表单数据编码

处理 application/x-www-form-urlencoded 格式的数据：

编码前：

name=张三
email=zhangsan@example.com
message=Hello World!

编码后：

name=%E5%BC%A0%E4%B8%89&email=zhangsan%40example.com&message=Hello+World!

特点：

空格编码为 +
键值对用 & 连接
@ 编码为 %40

4. URL 解析分析

解析 URL 并显示各个组成部分：

https://user:pass@example.com:8080/path/to/page?query=value#fragment

解析结果：

组件	值
协议 (protocol)	`https:`
用户名 (username)	`user`
密码 (password)	`pass`
主机 (host)	`example.com`
端口 (port)	`8080`
路径 (pathname)	`/path/to/page`
查询 (search)	`?query=value`
哈希 (hash)	`#fragment`

5. 查询参数处理

参数编码

const params = new URLSearchParams();
params.append('name', '张三');
params.append('skills', 'JavaScript');
params.append('skills', 'Python');

params.toString();
// "name=%E5%BC%A0%E4%B8%89&skills=JavaScript&skills=Python"

参数解析

?name=张三&age=25&skills=JS&skills=Python

解析结果：

{
  "name": "张三",
  "age": "25",
  "skills": ["JS", "Python"]
}

6. 特殊字符编码表

字符	URL 编码	说明
空格	`%20` 或 `+`	空格
`!`	`%21`	感叹号
`#`	`%23`	井号
`$`	`%24`	美元符号
`%`	`%25`	百分号
`&`	`%26`	和号
`'`	`%27`	单引号
`(`	`%28`	左括号
`)`	`%29`	右括号
`*`	`%2A`	星号
`+`	`%2B`	加号
`,`	`%2C`	逗号
`/`	`%2F`	斜杠
`:`	`%3A`	冒号
`;`	`%3B`	分号
`=`	`%3D`	等号
`?`	`%3F`	问号
`@`	`%40`	@符号
`[`	`%5B`	左方括号
`]`	`%5D`	右方括号
中	`%E4%B8%AD`	中文示例

实际应用场景

场景 1：生成分享链接

将用户输入的内容编码到 URL 中：

const userInput = "Hello 世界!";
const encoded = encodeURIComponent(userInput);
const shareUrl = `https://example.com/share?text=${encoded}`;
// https://example.com/share?text=Hello%20%E4%B8%96!

场景 2：处理表单提交

<form action="/search" method="GET">
  <input type="text" name="q" value="Hello 世界">
  <button type="submit">搜索</button>
</form>

提交后 URL：

/search?q=Hello+%E4%B8%96

场景 3：AJAX 请求

// 发送中文参数
const keyword = "北京天气";
fetch(`/api/weather?q=${encodeURIComponent(keyword)}`)
  .then(response => response.json())
  .then(data => console.log(data));

// 请求 URL: /api/weather?q=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94

场景 4：URL 重写和路由

// 路由参数编码
const articleTitle = "10 个 JavaScript 技巧";
const slug = encodeURIComponent(articleTitle);
const url = `/articles/${slug}`;
// /articles/10%20%E4%B8%AA%20JavaScript%20%E6%8A%80%E5%B7%A7

场景 5：处理回调 URL

const callbackUrl = "https://myapp.com/callback?status=success";
const oauthUrl = `https://oauth.provider.com/auth?redirect_uri=${encodeURIComponent(callbackUrl)}`;
// redirect_uri 参数被正确编码

常见问题

Q: 什么时候用 encodeURI，什么时候用 encodeURIComponent？

encodeURI - 编码完整 URL，保留 URL 特殊字符

encodeURI("https://example.com/path?q=hello world");
// "https://example.com/path?q=hello%20world"

encodeURIComponent - 编码 URL 组件，编码所有特殊字符
```
encodeURIComponent("hello world");
// "hello%20world"
```

原则： 编码参数值用 encodeURIComponent，编码完整 URL 用 encodeURI。

Q: 为什么空格有时编码为 `%20`，有时为 `+`？

%20 - URL 标准编码（RFC 3986）
+ - 表单数据编码（application/x-www-form-urlencoded）

// URL 中
encodeURIComponent("a b");  // "a%20b"

// 表单数据中
new URLSearchParams({key: "a b"}).toString();  // "key=a+b"

Q: 解码失败怎么办？

A: 检查：

是否是有效的编码字符串
是否混合了不同编码格式
中文字符是否使用 UTF-8 编码

Q: 如何编码整个对象？

A: 使用 URLSearchParams：

const data = {
  name: "张三",
  age: 25,
  city: "北京"
};

const params = new URLSearchParams(data);
params.toString();
// "name=%E5%BC%A0%E4%B8%89&age=25&city=%E5%8C%97%E4%BA%AC"