URL编码（也称为百分号编码）是一种使用%XX格式表示URL中特殊字符的机制，其中XX是十六进制值。此编码对于Web开发、API集成和数据传输至关重要。当您需要在URL或查询参数中包含空格、&符号、问号（?）或非ASCII字符等特殊字符时，正确的编码可确保数据安全传输而不破坏URL结构。该工具支持两种编码模式：完整URL编码（encodeURI）保留URL结构字符如:、/、?、&、=，同时编码其他特殊字符——适合编码完整URL。组件编码（encodeURIComponent）编码所有特殊字符包括URL结构字符——非常适合查询参数值、表单数据和API请求负载。所有处理都在浏览器的客户端进行，不向服务器发送数据。
How to Use
使用顶部的单选按钮选择编码或解码模式。编码时：将文本或URL粘贴到输入区域，输出会自动更新为编码结果。选择空格编码样式：%20（标准，符合RFC 3986）或+（常用于查询字符串和表单数据）。切换\"编码完整URL\"以在完整URL编码（保留:、/、?、&、=）和组件编码（编码所有内容）之间切换。解码时：粘贴编码的URL文本，它会自动解码回可读格式，处理%20和+两种空格表示。使用复制按钮一键复制输出，或将结果下载为文本文件。
Common Use Cases & Examples
**查询参数**：将"smart watch"编码为"smart%20watch"或"smart+watch"用于URL查询字符串。**API请求**：构建API URL如"https://api.example.com/search?q=电子产品%20%26%20小工具&价格=%3E100"，参数正确编码。**OAuth和签名**：许多OAuth流程和API签名算法需要URL编码参数。**表单数据**：为application/x-www-form-urlencoded内容类型编码表单提交。**深度链接**：为移动应用创建带参数的编码深度链接。**调试**：解码API响应或浏览器URL栏以查看实际参数值。**特殊字符**：处理URL中的&、=、?、#、/、@、:、<、>、\"、'、%、+和空格等字符。
Limitations & Important Notes
此工具使用UTF-8编码（现代Web标准）。不支持非UTF-8编码。该工具处理标准URL编码；对于其他编码方案（如base64或HTML实体），请使用相应的工具。超长URL（>100KB）可能在旧浏览器中导致性能问题。解码模式下的格式错误百分号序列（如%ZZ或不完整序列）将触发错误消息。"编码完整URL"选项只应用于以http://或https://开头的完整URL——对于单独的查询参数值，请使用组件编码。请记住，URL编码会增加文本大小：每个特殊字符变成3个字符（%XX），因此"hello world"（11个字符）变成"hello%20world"（13个字符）。
// JavaScript URL Encoding Examples
// Encode full URL (preserves protocol, slashes, etc.)
const fullUrl = 'https://example.com/search?q=hello world';
const encodedUrl = encodeURI(fullUrl);
console.log(encodedUrl);
// https://example.com/search?q=hello%20world
// Encode URL component (encodes all special chars)
const queryParam = 'hello world & special chars';
const encodedParam = encodeURIComponent(queryParam);
console.log(encodedParam);
// hello%20world%20%26%20special%20chars
// Build URL with encoded parameters
const baseUrl = 'https://api.example.com/search';
const params = {
q: 'smart watch',
category: 'electronics & gadgets',
price: '>100'
};
const queryString = Object.entries(params)
.map(([key, value]) =>
`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
const fullApiUrl = `${baseUrl}?${queryString}`;
console.log(fullApiUrl);
// https://api.example.com/search?q=smart%20watch&category=electronics%20%26%20gadgets&price=%3E100
// Decode URL
const encoded = 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello+world';
const decoded = decodeURIComponent(encoded.replace(/\+/g, ' '));
console.log(decoded);
// https://example.com/search?q=hello world
// Handle encoding errors
try {
const malformed = '%E0%A4%A'; // Incomplete UTF-8 sequence
const result = decodeURIComponent(malformed);
} catch (error) {
console.error('Invalid URL encoding:', error.message);
}