URL Encoding Decoded: Percent-Encoding and Query Strings
encodeURI vs encodeURIComponent, spaces as %20 vs +, and how to fix double-encoded links.
URLs only allow a limited character set unescaped. Spaces, unicode, ampersands in search queries, and slashes in file names must be percent-encoded—each unsafe byte becomes `%` followed by two hex digits. Mixing up encodeURI and encodeURIComponent is one of the most common causes of broken links and API 400 errors.
How percent-encoding works
Reserved characters like `?`, `#`, `&`, and `=` have structural meaning in URLs. Encode them when they appear in data (query values, path segments), not when they separate parts of the URL. Space becomes `%20` in paths; form encoding uses `+` for space in application/x-www-form-urlencoded bodies.
- %20 — space (most common in query strings)
- %2F — slash (when / is data, not a path separator)
- %26 — ampersand (when & is data, not a param separator)
- UTF-8 multibyte chars encode as multiple %XX sequences
encodeURI vs encodeURIComponent
| Function | Encodes | Leaves unencoded |
|---|---|---|
| encodeURI | Full URL strings | :/.?#[]@!$&'()*+,;= |
| encodeURIComponent | Single components (values) | A–Z a–z 0–9 - _ . ! ~ * ' ( ) |
Building `https://api.example.com/search?q=coffee%20%26%20tea` requires encodeURIComponent on the query value only—encoding the whole URL would break the scheme and host.
Avoid double-encoding
Encoding an already-encoded string turns `%` into `%25`— `%20` becomes `%2520`. Decode first when unsure, or use a normalize-before-encode option. Server logs showing `%2520` usually mean double-encoding upstream.
Encode, decode, and parse URLs
The URL Encoder/Decoder on XSular Tools supports full URL, query, path, and form modes; auto-detects direction; breaks URLs into protocol, host, path, and query table; and runs batch operations—all client-side.
Try it now
URL Encoder & Decoder — Free Online Percent Encoding Tool
Percent-encode and decode URLs, query strings, and URI components with auto-detect mode and full URL parsing breakdown. Character replacement map included. Free browser tool — nothing uploaded, instant encode and decode.
Related posts
Practical articles on writing, development, design, and productivity — each tied to a free XSular tool you can use right away.
What Makes a Strong Password in 2025?
A complete guide to password security, common mistakes, and how to protect your accounts.
Jan 22, 2025Unix Timestamps Explained for Non-Developers
What is a Unix timestamp, why it starts at 1970, and how to convert them easily.
Jan 28, 2025Binary Numbers Explained for Beginners
How computers think in 0s and 1s, and how to convert text to binary yourself.
Feb 3, 2025