How To Url Encode Correctly

What URL encoding is

Example: space (0x20) → %20. At sign (0x40) → %40. Non-ASCII characters are encoded as their UTF-8 byte sequence, one %XX per byte: é (U+00E9) → %C3%A9 (two bytes).

Reserved vs unreserved characters

RFC 3986 divides URL characters into categories:

encodeURI vs encodeURIComponent — the JavaScript fork

JavaScript’s two URL encoders have different purposes and mixing them up is the #1 URL bug.

The URLSearchParams approach — safer, modern

Skip manual encoding entirely for query strings:

Path encoding vs query encoding

Subtle differences between segments of a URL.

Double-encoding — the classic trap

Encoding an already-encoded URL turns %20 into %2520 (because % becomes %25). The result looks URL-valid but the destination server gets the literal string “%20” instead of a space.

UTF-8 and non-ASCII characters

Symptoms: product pages showing “Item %26 Part” in the title, search queries returning no results for simple terms, 404s on URLs with special characters.

Form encoding — related but distinct

Modern URL encoding is defined on UTF-8 bytes, not Unicode code points directly. A character like é is first encoded as UTF-8 (two bytes: 0xC3 0xA9), then each byte becomes %XX (%C3%A9).

Server-side decoding

Everything else follows standard percent-encoding.

Common mistakes

Run the numbers