URL 編碼

相關推薦

什麼是 URL 編碼？

適用場景

• API debugging: compare encodeURIComponent vs encodeURI outputs to debug signature mismatches
• Log decoding: batch-decode URL-encoded log entries back to readable text
• URL building: Query Only mode preserves keys while encoding values
• Frontend dev: encoding highlight helps understand which characters get escaped
• Data migration: batch process URL-encoded data from legacy systems

使用方法

1. Paste URL or text to encode/decode
2. Select direction (Encode/Decode) and mode (Component/URI/full/RFC 3986)
3. Enable batch mode for multi-line, or Query Only for parameter values only
4. Copy the highlighted result for API requests or URL building

功能特點

• 四种编码模式：encodeURIComponent / encodeURI / full / RFC 3986 一键切换，实时对比不同规则输出差异
• 编码高亮：实时高亮显示被转义的 %XX 字符，琥珀色标记让编码结果一目了然
• 批量模式：支持多行批量编码解码，每行独立处理，适合处理日志或批量数据
• Query Only 模式：只编码 URL 参数值部分（等号后内容），保留键名、符号和路径结构不变
• 实时防抖：300ms 自动编码解码，无需点击按钮，输入即出结果
• 字符统计：实时显示输入字符数，方便核对 API 参数长度限制

程式碼範例

// encodeURIComponent: encodes individual param values (most common)
const param = encodeURIComponent('Zhang San&Li Si');
console.log(param);

// encodeURI: encodes full URL (preserves :/?#&= structural chars)
const url = encodeURI('https://example.com/search?q=hello world');
console.log(url);

// Decode
const decoded = decodeURIComponent(param);
console.log(decoded);

// RFC 3986 compliant (~ not encoded)
function rfc3986Encode(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g,
    c => '%' + c.charCodeAt(0).toString(16).toUpperCase());
}

// Modern: URLSearchParams (auto-handles encoding)
const params = new URLSearchParams({name:'Zhang San',city:'Beijing'});
console.log(params.toString());

from urllib.parse import quote, unquote, urlencode, quote_plus

# quote: similar to encodeURIComponent
encoded = quote('Zhang San&Li Si')
print(encoded)

# RFC 3986 is default (~ not encoded)
print(quote('hello~world'))  # hello~world

# quote_plus: spaces become + (form format)
print(quote_plus('hello world'))  # hello+world

# Decode
print(unquote(encoded))

# urlencode: build query strings
params = urlencode({'name':'Zhang San','city':'Beijing'})
print(params)

import java.net.URLEncoder;
import java.net.URLDecoder;
import java.net.URI;
import java.nio.charset.StandardCharsets;

public class URLEncodeExample {
    public static void main(String[] args) throws Exception {
        String encoded = URLEncoder.encode("Zhang San&Li Si", "UTF-8");
        System.out.println(encoded);
        String decoded = URLDecoder.decode(encoded, "UTF-8");
        System.out.println(decoded);
        URI uri = new URI("https","example.com","/search","q=hello",null);
        System.out.println(uri.toASCIIString());
    }
}

常見問題

術語表

Percent-encoding

The formal name for URL encoding, representing characters as % followed by two hex digits. Space→%20, 中→%E4%B8%AD.Wikipedia

encodeURIComponent

JavaScript built-in encoding all chars except A-Z a-z 0-9 - _ . ! ~ * ' ( ). Used for individual query parameter values.

encodeURI

JavaScript built-in preserving URL structural characters (: / ? # [ ] @ ! $ & ' ( ) * + , ; =), used for encoding complete URLs.

RFC 3986

The current IETF URI standard (2005) defining URL encoding rules, classifying ~ as unreserved. Replaces RFC 2396/1738.RFC 3986

Reserved Characters

Characters with special meaning in URLs (: / ? # [ ] @ ! $ & etc.) that must be encoded when used as data but not in their structural roles.

Unreserved Characters

Characters safe anywhere in URLs without encoding: A-Z, a-z, 0-9, -, _, ., ~ (per RFC 3986).

Query String

The part of a URL after ?, consisting of key=value pairs separated by &.

URLSearchParams

Modern browser API for safely building/parsing query strings with automatic encoding.

application/x-www-form-urlencoded

HTML form submission format where spaces become + instead of %20. Server frameworks usually handle both.

UTF-8 Encoding

The Web standard. Non-ASCII characters (Chinese, emoji) are first converted to UTF-8 byte sequences, then each byte is %XX-encoded.

Character Encoding Comparison Across 4 Modes

Common URL Reserved Characters Quick Reference

Authoritative References

• ReferenceRFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
• ReferenceRFC 1738 - Uniform Resource Locators (URL)
• ReferenceMDN Web Docs - encodeURIComponent()
• ReferenceMDN Web Docs - encodeURI()
• ReferenceWikipedia - Percent-encoding