What Is URL Encoding and Why Does It Matter?
URL encoding, formally defined as percent-encoding in RFC 3986, is the process of converting characters that are not allowed in a URL into a safe, transmittable format. Every character that is not an unreserved character — meaning it is not a letter, digit, hyphen, underscore, period, or tilde — must be encoded before it can appear in a URL.
Encoding works by replacing the unsafe character with a percent sign (%) followed by two hexadecimal digits that represent the character’s ASCII or UTF-8 byte value. A space becomes %20, an ampersand becomes %26, and an equals sign becomes %3D. Without encoding, URLs break, servers misinterpret parameters, and data is silently corrupted in transit.
encodeURIComponent vs encodeURI: Which One Should You Use?
This is the most common source of confusion in URL encoding. The two JavaScript functions behave very differently and choosing the wrong one causes subtle bugs that are hard to track down.
encodeURIComponent — For Query Parameter Values
encodeURIComponent encodes everything except letters (A–Z, a–z), digits (0–9), and the six characters - _ . ! ~ * ' ( ). This means it encodes all URL structural characters including /, ?, &, =, and #. Use this function when you are encoding a single value that will be embedded inside a URL — for example, a search query, a user name, or a file path that needs to go into a query parameter.
Example: encoding hello world & more with encodeURIComponent gives hello%20world%20%26%20more — safe to use as a parameter value.
encodeURI — For Complete URLs
encodeURI assumes the input is already a valid URL structure and deliberately skips encoding characters that have meaning inside a URL: ; , / ? : @ & = + $ #. Use this when you have a complete URL that already has its path and query string formed and you just need to make the non-ASCII characters safe without breaking the URL’s structure.
Example: encoding https://example.com/search?q=hello world with encodeURI gives https://example.com/search?q=hello%20world — the structure is preserved and only the space is encoded.
Common URL Encoding Reference Table
| Character | Encoded | Notes |
|---|---|---|
| Space | %20 | Most common encoding need |
! | %21 | Encoded by encodeURIComponent |
# | %23 | Fragment identifier in URLs |
$ | %24 | |
& | %26 | Separates query parameters |
' | %27 | |
+ | %2B | Used as space in form encoding |
, | %2C | |
/ | %2F | Path separator |
: | %3A | Protocol separator |
; | %3B | |
= | %3D | Key-value separator |
? | %3F | Query string start |
@ | %40 | Used in userinfo |
[ | %5B | |
] | %5D |
Real-World URL Encoding Use Cases
Building API Query Parameters
When calling REST APIs with dynamic values, always encode each parameter value with encodeURIComponent before appending it to the URL. If a user searches for café & bakery, you must encode it as caf%C3%A9%20%26%20bakery before inserting it into your request URL. Failing to do so sends a malformed request that the server may reject or misparse.
Sharing URLs With Special Characters
File names on web servers often contain spaces, parentheses, or accented characters. A file named Q3 Report (Final).pdf must be encoded as Q3%20Report%20%28Final%29.pdf to be served correctly by most web servers. This is especially important in S3 bucket URLs, CDN paths, and SharePoint links.
OAuth and Authentication Tokens
OAuth 1.0a signatures and many authentication schemes require all URL components to be percent-encoded, including the parameter names. Encoding must be precise — a missing or incorrect character encoding causes signature mismatches and authentication failures.
Sending Data Through Email and Messaging
Links shared through email clients, SMS, and many chat platforms can be corrupted by line-break insertion or character stripping. A properly encoded URL survives these transformations because it contains only ASCII-safe characters.
Avoiding Double-Encoding
A frequent mistake is encoding a string that has already been encoded. This turns %20 into %2520 (encoding the percent sign itself), producing a URL that decodes to the wrong value. Always check whether your input is already encoded before running it through the encoder. If it contains % followed by two hex digits, it is likely already encoded.
URL Encoding and SEO
Search engines handle percent-encoded URLs correctly, but there are SEO best practices worth following. Use lowercase hex digits in encoded sequences (%2f instead of %2F) for consistency. Prefer hyphens to encoded spaces in URL paths — /blog/hello-world is better than /blog/hello%20world. For query parameters containing non-ASCII characters such as Chinese, Arabic, or Japanese text, percent-encoding is required and Google handles it correctly.