What is URL encoding?
URL encoding (also called percent-encoding) is a mechanism for representing arbitrary data in a URI. Characters that are not allowed in a URL, or that have special meaning in URL syntax, are replaced by a percent sign followed by two hexadecimal digits representing the character's UTF-8 byte value.
For example, a space character (ASCII 32, hex 0x20) becomes %20. An at sign (ASCII 64, hex 0x40) used inside an email query parameter becomes %40. Multi-byte UTF-8 characters like é (U+00E9) encode as %C3%A9 because its UTF-8 encoding is two bytes: 0xC3 0xA9.
URL encoding is defined in RFC 3986 — the specification for URIs. JavaScript implements it through two native functions: encodeURIComponent() and encodeURI().
encodeURIComponent vs encodeURI — which one to use?
The key difference is which characters each function leaves unencoded:
| Function | Leaves unencoded | Use for |
|---|---|---|
| encodeURIComponent | A–Z a–z 0–9 - _ . ! ~ * ' ( ) | Query parameter values, path segments, form data |
| encodeURI | A–Z a–z 0–9 - _ . ! ~ * ' ( ) ; , / ? : @ & = + $ # | Complete URLs where structural characters must be preserved |
The practical rule: if you are encoding a value that will go inside a query string or path segment, use encodeURIComponent. If you have a complete URL you want to safe-encode without breaking its structure, use encodeURI.
Reserved and unreserved characters
RFC 3986 categorises URL characters into three groups:
- Unreserved characters — always safe to use anywhere, never need encoding:
A–Z a–z 0–9 - _ . ~ - Reserved characters — have special structural meaning in URLs and must be encoded when used as data:
: / ? # [ ] @ ! $ & ' ( ) * + , ; = - All other characters — must always be percent-encoded: spaces, Unicode, emoji, control characters, and any byte outside the printable ASCII range.
A common mistake is to encode a URL and then embed it inside another URL without encoding the percent signs again. If a URL containing %20 is placed as a query parameter value, the % itself must be encoded to %25, giving %2520. Double-encoding is a frequent source of bugs in redirect URLs and OAuth flows.
Common percent-encoded values reference
| Character | Encoded | Notes |
|---|---|---|
| Space | %20 | Forms may use + instead (application/x-www-form-urlencoded) |
| ! | %21 | Unreserved in encodeURIComponent — not encoded |
| " | %22 | Must be encoded in URLs |
| # | %23 | Fragment delimiter — encoded by encodeURIComponent |
| % | %25 | Must encode the % itself when used as literal data |
| & | %26 | Query string delimiter — encode when used in values |
| + | %2B | Plus sign; sometimes confused with space in form encoding |
| / | %2F | Path separator — encode with encodeURIComponent |
| : | %3A | Protocol and port separator |
| = | %3D | Query key/value separator |
| ? | %3F | Query string start |
| @ | %40 | E.g. email addresses in query params |
| [ | %5B | Used in array query params like filter[0]= |
| ] | %5D | Closing bracket for array params |
Practical examples for developers
Building a search URL:
const query = "what is URL encoding?";
const url = `https://example.com/search?q=${encodeURIComponent(query)}`;
// → https://example.com/search?q=what%20is%20URL%20encoding%3FUsing URLSearchParams (recommended for multiple params):
const params = new URLSearchParams({
q: "hello world",
lang: "en",
page: "1"
});
const url = `https://example.com/search?${params.toString()}`;
// → https://example.com/search?q=hello+world&lang=en&page=1Note that URLSearchParams uses the form-urlencoded format (spaces → +), while encodeURIComponent uses RFC 3986 (spaces → %20). Both are widely supported but be consistent within a project.
Frequently Asked Questions
What is the difference between encodeURIComponent and encodeURI?
encodeURIComponent encodes everything except unreserved characters (A–Z a–z 0–9 - _ . ! ~ * ' ( )). It is designed for encoding individual query string parameters and form values where characters like /, ?, &, = must be escaped. encodeURI is designed for encoding a complete URL — it preserves structural characters like : / ? # [ ] @ ! $ & ' ( ) * + , ; = because those are meaningful parts of the URL structure. If you are encoding a value to go inside a query string, always use encodeURIComponent.
Why does a space become %20 and not a plus sign?
In the RFC 3986 percent-encoding standard (used by encodeURIComponent), spaces become %20. The plus sign convention for spaces comes from the older application/x-www-form-urlencoded format used by HTML forms — where spaces become + and + itself becomes %2B. Modern APIs and fetch() use RFC 3986, so %20 is correct. If you are building a URL query string with URLSearchParams in JavaScript, it uses the form-urlencoded format and will produce + for spaces.
Should I encode the entire URL or just the query parameter values?
Almost always, encode only the parameter values. If you encode the entire URL with encodeURIComponent, the slashes, colons, and question marks in the URL structure will also be encoded, breaking the URL. The correct pattern is: encode each parameter value individually with encodeURIComponent, then assemble the URL — or use URLSearchParams which handles this automatically: new URLSearchParams({ q: 'hello world', lang: 'en' }).toString() produces q=hello+world&lang=en.
What characters are safe in a URL without encoding?
RFC 3986 defines unreserved characters that never need encoding: uppercase letters A–Z, lowercase letters a–z, digits 0–9, and the four symbols - _ . ~. Everything else should be percent-encoded when used as data inside a URL component. The reserved characters (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) are safe as structural delimiters but must be encoded when they appear as data values — for example, an email address containing @ must be encoded as %40 inside a query parameter.
How do I decode a URL that has been encoded?
Use the URL Decoder tool — it runs decodeURIComponent or decodeURI on your input and shows the original text. In JavaScript, you can also call decodeURIComponent('%48%65%6C%6C%6F') directly in the browser console. For debugging URLs in production, browser DevTools Network panel automatically decodes query strings in the Request URL display.