URL 编解码

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 编码

1. 输入要编码的文本：

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

2. 选择编码类型：

   • 完整 URL - 编码整个 URL
   • URI 组件 - 只编码参数值

3. 获取编码结果：

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

URL 解码

1. 粘贴编码后的 URL：

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

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

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？

A:

• 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，有时为 +？

A:

• %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"

相关工具

• Base64 编解码 - Base64 编码转换
• JSON 格式化 - JSON 数据处理
• HTML 实体编解码 - HTML 特殊字符
• Unicode 转换 - Unicode 编码转换

---

💡 提示

正确处理 URL 编码是 Web 开发的基础技能，特别是在处理中文和特殊字符时尤为重要！