🔗 🔗 URL Encoder / Decoder: How URL Encoding Works

URLs can only contain a limited set of safe characters — letters, digits, and a few special characters. Everything else must be encoded using a system called percent-encoding (also called URL encoding). Understanding this encoding is essential for web developers building APIs, creating query parameters, working with web scraping, and debugging network requests.

Why URL Encoding Exists

URLs were originally defined in RFC 1738 (1994) to use only ASCII characters, and even within ASCII, many characters have special meaning in a URL's structure:

• ? starts the query string
• & separates query parameters
• = separates a parameter name from its value
• / separates URL path segments
• # starts the fragment identifier

If these characters appear in data (not as structural delimiters), they must be encoded to prevent the URL parser from misinterpreting them. For example, a search query containing "&" would break query string parsing if not encoded.

How Percent-Encoding Works

Each unsafe character is replaced with %XX, where XX is the hexadecimal representation of the character's UTF-8 byte value.

Process:

1. Convert the character to its UTF-8 byte sequence
2. Express each byte as two hexadecimal digits
3. Prefix each byte with a percent sign %

Examples

Safe Characters That Don't Need Encoding

Per RFC 3986, these characters are "unreserved" and safe anywhere in a URL without encoding:

• Letters: A–Z, a–z
• Digits: 0–9
• Hyphen: -
• Underscore: _
• Period: .
• Tilde: ~

Space Encoding: %20 vs +

Space is encoded as %20 in URL paths and as either %20 or + in query strings. The + for space is a legacy from HTML form encoding (application/x-www-form-urlencoded) and is only valid in query string values, not in URL paths.

When decoding URLs, a decoder must know which context it's in — decoding + as a space in a URL path is incorrect.

Best practice: always use %20 for spaces (it works everywhere); use + only when targeting older form-based systems that specifically require it.

encodeURIComponent vs encodeURI in JavaScript

JavaScript provides two built-in encoding functions with different behavior:

• encodeURI(url): Encodes a full URL. Does NOT encode: ; , / ? : @ & = + $ # (structural characters that should remain as-is in a complete URL). Use for encoding a full URL.
• encodeURIComponent(value): Encodes a URL component (a parameter value). Encodes everything except unreserved characters. Use for encoding individual query parameter values.

Example: Encoding a search query "coffee & cake" as a URL parameter:

encodeURIComponent("coffee & cake") → coffee%20%26%20cake

Full URL: https://example.com/search?q=coffee%20%26%20cake

Common URL Encoding Mistakes

• Double-encoding: Encoding an already-encoded string encodes the % signs themselves. %20 becomes %2520 (incorrect). Always decode first if you're unsure whether input is already encoded.
• Not encoding query values: Passing raw user input as query parameters breaks when the value contains &, =, or #.
• Using + for space in paths: Only valid in query strings; breaks path resolution.
• Forgetting non-ASCII characters: Characters like ñ, ü, Chinese characters, and emoji must be UTF-8 encoded then percent-encoded.