URL Encoding, Percent-Encoding and Query Strings: What Actually Matters

URL encoding bugs hide in plain sight: a plus sign that becomes a space, a slash that cuts a parameter short, a mailto link that breaks in exactly one mail client. The rules fit in one article — and a habit of checking.

What percent-encoding actually is

A URL can only carry a limited set of characters safely. Everything else — space, accents, Emoji, a literal slash inside a value — becomes %XX byte sequences. A space is %20; a plus sign in a query value is %2B, because in application/x-www-form-urlencoded space is written as a literal +.

encodeURI vs encodeURIComponent

• encodeURI keeps URL structure (/ ? & #) — for encoding a complete address.
• encodeURIComponent escapes structure too — for encoding a value that will live inside another URL.

Using the wrong one is the classic bug: full URLs pasted as parameter values without component encoding lose everything after the inner query. The URL Encoder & Decoder has both modes with the per-character mapping shown.

Double-encoding and its twin

Sent through two encoders, a value turns %20 into %2520. Decode repeatedly in the tool until changes stop — that reveals how many layers the data passed through, and which layer dropped it. Equally common: decoding once at a layer that should not decode at all.

Parsing beats guessing

When a URL misbehaves, inspect it structurally instead of staring at the string. The URL Parser splits protocol, host, path, each query key-value pair and the fragment, decoding each parameter individually per WHATWG rules — the same rules browsers apply, so what you see is what routing code gets.