The problem URL encoding solves
URLs are only allowed to contain a limited set of characters. Spaces, and symbols like ?, &, #, and / have special meaning or aren't allowed at all. To include them safely in a URL, they're replaced with a percent sign followed by their hexadecimal byte value — which is why a space becomes %20.
Reserved vs unreserved characters
Letters, digits, and a few symbols (- _ . ~) are 'unreserved' and never need encoding. 'Reserved' characters like & = ? / have structural meaning in a URL, so if you want them as literal data (say, inside a query value), they must be encoded.
Where it bites you
- Passing a value with an ampersand in a query string without encoding it splits your parameter in two.
- Non-English characters in a URL must be UTF-8 encoded then percent-encoded.
- Spaces in a filename link break unless encoded.
Encode the value, not the whole URL
A common mistake is encoding an entire URL, which mangles the :// and slashes. You almost always want to encode individual query-parameter values, not the structural parts of the URL.
Frequently Asked Questions
Why does a space become %20?
Spaces aren't allowed in URLs, so they're replaced with %20 — the percent sign plus the hex code (20) for a space character.
What's the difference between encodeURI and encodeURIComponent?
encodeURI keeps structural characters like / and ? intact for a full URL; encodeURIComponent encodes them too, which is what you want for a single query value.
Do I need to encode letters and numbers?
No. Letters, digits, and - _ . ~ are safe and never need encoding.