How to Encode and Decode URLs
If you have ever seen %20 in a URL where a space should be, or %C3%A9 where an accented character belongs, you have encountered URL encoding. It is a fundamental part of how the web works, and understanding it helps you debug broken links, API issues, and form submissions.
What URL encoding does
URLs can only contain a limited set of characters safely: letters (A-Z, a-z), digits (0-9), and a few special characters (-, _, ., ~). Everything else — spaces, accented characters, emoji, and symbols like &, =, #, ? — must be converted to a safe format.
URL encoding (also called percent-encoding) replaces unsafe characters with a % followed by their hexadecimal byte values:
| Character | Encoded |
|---|---|
| Space | %20 |
| & | %26 |
| = | %3D |
| # | %23 |
| ? | %3F |
| / | %2F |
| @ | %40 |
When you need URL encoding
- Query parameters with special characters — a search query like
price > 100 & category = shoesneeds encoding to work in a URL - Non-English characters in URLs — names, cities, or content in other languages must be encoded
- API requests — when building API calls manually, parameter values often need encoding
- Debugging — when a URL is not working, decoding it reveals what the actual values are
How to encode and decode
- Choose encode or decode — select the direction. Pick encodeURIComponent for query parameters or encodeURI for full URLs.
- Paste your input — enter the text or URL. The result updates instantly.
- Copy the output — use the result in your code, API request, or browser.
Tips
- Encode values, not entire URLs — if you encode an entire URL, the slashes and colons that structure the URL will also be encoded, breaking it. Only encode the values within query parameters.
- Double encoding — encoding an already-encoded string produces things like
%2520(the%gets encoded as%25). If your URL looks wrong, check if something is being encoded twice. - Decode for debugging — when an API request fails or a URL looks garbled, decode it to see the actual parameter values. This often reveals the problem immediately.
- Use your language's built-in functions — in production code, always use
encodeURIComponent()(JavaScript),urllib.parse.quote()(Python), orURLEncoder.encode()(Java) rather than encoding by hand.
Frequently Asked Questions
What is the difference between encodeURI and encodeURIComponent?
encodeURI preserves characters that are valid in a URL structure (slashes, colons, question marks). encodeURIComponent encodes everything except letters, digits, and a few safe characters. Use encodeURIComponent for query parameter values, encodeURI for complete URLs.
Why do spaces become %20 or +?
In URL encoding, spaces become %20. In form data (application/x-www-form-urlencoded), spaces become +. Both are valid in their respective contexts, but %20 is the universal standard for URLs.
Do I need to encode my URLs manually?
In most cases, your programming language or framework handles encoding automatically. Manual encoding is needed when building URLs by hand, debugging API requests, or working with query strings that contain special characters.
Is my data sent to a server?
No. All encoding and decoding happens in your browser.