Encoders / Decoders5 min read
URL encoding, also called percent-encoding, is how values with spaces, ampersands, or non-ASCII characters travel safely inside a URL. Get it wrong and a query parameter silently breaks into two, or a value is double-encoded. This guide explains what to encode, when, and how, including the classic %20-versus-plus question. Try any value in the URL Encoder.
Why URL encoding exists
URLs may only contain a limited set of ASCII characters, and several of those characters — like ? # & = / — have structural meaning. When a value contains a space, one of those reserved characters, or a non-ASCII character, it must be percent-encoded: replaced with a % followed by its hexadecimal byte value. Otherwise the value would break the URL or be mistaken for structure.
How percent-encoding works
Each character is converted to its UTF-8 bytes, and each byte becomes %XX where XX is that byte in hexadecimal. A space is 0x20, so it becomes %20; an accented or non-Latin character becomes several percent-encoded bytes.
| Character | Encoded |
|---|---|
| space | %20 |
| & | %26 |
| = | %3D |
| ? | %3F |
| # | %23 |
| / | %2F |
| + | %2B |
| café | caf%C3%A9 |
Reserved vs unreserved characters
Unreserved characters — letters, digits, and - _ . ~ — are always safe and never need encoding. Reserved characters have special meaning in a URL and are encoded only when they appear inside a value rather than as a separator. Knowing the difference is what keeps a query string both correct and readable.
encodeURIComponent vs encodeURI
JavaScript offers two functions and using the wrong one is a common bug. encodeURIComponent encodes a single value, including reserved characters like & and =, and is what you want for a query parameter. encodeURI is for an entire URL and deliberately leaves structural characters intact.
encodeURIComponent("a&b=c") -> "a%26b%3Dc" // for one value
encodeURI("https://x.com/a b") -> "https://x.com/a%20b" // whole URLBuilding a query string
Encode each key and each value separately, then join them with & and =. Encoding the whole assembled string at once would wrongly escape the separators. For a parameter that appears more than once, repeat the key.
The classic gotcha: an unencoded & inside a value is read as a separator, splitting one parameter into two. Percent-encode it as %26 so it stays part of the value.
Frequently asked questions
What is the difference between %20 and + for a space?+
%20 encodes a space anywhere in a URL. A + means a space only inside a query string. Using %20 is the safest, most portable choice.
When should I use encodeURIComponent vs encodeURI?+
Use encodeURIComponent for a single value like a query parameter; use encodeURI for a whole URL, which leaves separators such as & and = intact.
Do letters and numbers need to be encoded?+
No. Letters, digits, and the unreserved characters - _ . ~ are always URL-safe and are left unchanged.
What is double-encoding?+
Encoding an already-encoded string, which turns %20 into %2520. Decode once to check whether a value was encoded one time or two.