What Is URL Encoding?
URL encoding (percent-encoding) converts characters that aren't allowed in URLs into a format that is. It replaces unsafe characters with a % followed by two hex digits representing the character's ASCII code.
Why Do We Need It?
URLs can only contain a limited set of characters from the ASCII set. Characters like spaces, ampersands, and non-English letters would break URL parsing without encoding:
- Space →
%20(or+in form data) - & →
%26 - = →
%3D - ? →
%3F - # →
%23 - / →
%2F
encodeURI vs encodeURIComponent
JavaScript has two built-in functions — and confusing them is one of the most common bugs:
- encodeURI(): Encodes a full URI. Preserves :, /, ?, #, & — use for complete URLs
- encodeURIComponent(): Encodes a URI component. Encodes everything except letters, digits, - _ . ~ — use for query parameter values
Rule of thumb: Use encodeURIComponent() for parameter values, encodeURI() for full URLs. Getting this wrong is the #1 cause of broken API calls.
Space: %20 vs +
Both represent a space, but in different contexts:
%20— Standard percent-encoding (RFC 3986). Used in URL paths+— Only valid in form data (application/x-www-form-urlencoded). Used in query strings from HTML forms
Modern APIs should use %20 everywhere. The + convention is a legacy from HTML form submissions.
Common Mistakes
- Double-encoding: encoding an already-encoded string (
%2520instead of%20) - Not encoding user input in query parameters — injection risk
- Using encodeURI when you meant encodeURIComponent
- Forgetting to decode on the receiving end
Encode/Decode Instantly
Our URL Encoder/Decoder handles both standard and component encoding. Paste any URL or text and see the encoded/decoded result instantly.