URL Encoding and Percent-Escape Sequences

URL Encoding (Percent-Encoding)

URL encoding replaces unsafe or reserved characters with a percent sign followed by two hexadecimal digits representing the byte value. This mechanism, defined in RFC 3986, ensures URLs remain valid across all systems.

Characters That Must Be Encoded

URLs can only contain a limited set of ASCII characters. Everything else must be percent-encoded:

• Unreserved characters (never encoded): A-Z, a-z, 0-9, -, _, ., ~
• Reserved characters (encoded when not used as delimiters): :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =
• All other characters: spaces, non-ASCII, control characters

How Encoding Works

Each byte of the UTF-8 representation is encoded as %HH:

Space     → %20
@         → %40
&         → %26
Café (é) → Caf%C3%A9 (UTF-8 bytes: C3 A9)
日本語     → %E6%97%A5%E6%9C%AC%E8%AA%9E

encodeURI vs. encodeURIComponent

JavaScript provides two functions with critical differences:

• encodeURI() — Encodes a full URI, preserving delimiters like :, /, ?, #, &, =.
• encodeURIComponent() — Encodes a single URI component (query parameter value), encoding all reserved characters.

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

encodeURIComponent("hello world&more")
// "hello%20world%26more"

Using encodeURI for query values is a common bug — reserved characters like & and = pass through unescaped, breaking the query string structure.

Form Encoding (application/x-www-form-urlencoded)

HTML forms encode spaces as + instead of %20. This is a separate encoding defined in the HTML specification, not RFC 3986. JavaScript's URLSearchParams handles this format automatically.

Double Encoding

A frequent mistake is encoding an already-encoded URL, turning %20 into %2520. Always decode first if unsure whether the input is already encoded.

Path Segments vs. Query Parameters

Different URL components have different allowed characters. A / is a valid path separator but must be encoded if it appears in a query parameter value.