encodeURI vs encodeURIComponent
encodeURI() encodes a full URL and leaves reserved characters alone. encodeURIComponent() encodes one value so &, =, and ? cannot break query strings. See examples and common mistakes.
Use encodeURI for a whole URL, encodeURIComponent for one value
encodeURI() is for a complete URL you already assembled. It percent-encodes spaces and most Unicode, but it does not encode reserved URL characters such as :, /, ?, &, =, and #. encodeURIComponent() is for a single path segment, query key, or query value. It encodes those reserved characters so they cannot be read as URL syntax.
Compare both on the same input with the URL Encoder & Decoder. Encoding runs in your browser.
What each function changes
Both functions implement percent-encoding of UTF-8 bytes (see RFC 3986). The difference is the set of characters they leave untouched.
| Input | encodeURI() | encodeURIComponent() |
|---|---|---|
| hello world | hello%20world | hello%20world |
| a&b=c | a&b=c | a%26b%3Dc |
| café | caf%C3%A9 | caf%C3%A9 |
| https://example.com/a b | https://example.com/a%20b | https%3A%2F%2Fexample.com%2Fa%20b |
Query strings: encode the value, not the whole URL
If a search term contains & or =, encoding the entire URL with encodeURI() leaves those characters intact. The server then sees extra query parameters. Encode the value, then join it:
const q = "shirts & hats";
const url = "https://shop.example.com/search?q=" + encodeURIComponent(q);
// https://shop.example.com/search?q=shirts%20%26%20hatsDo not encodeURIComponent a complete URL
Calling encodeURIComponent() on https://example.com/path?x=1 turns :, /, and ? into percent sequences. The result is no longer a usable URL unless you intend to pass that whole string as a **single** query parameter (for example a redirect value).
const redirect = "https://app.example.com/home";
const login =
"https://auth.example.com/login?next=" + encodeURIComponent(redirect);Decoding
decodeURI() pairs with encodeURI(). decodeURIComponent() pairs with encodeURIComponent(). Mixing them is a common source of leftover %26 or broken https%3A schemes. Incomplete sequences such as %E0 should throw URIError.
Common mistakes
These mix-ups show up in redirects, webhooks, and copy-pasted fetch URLs.
- Using
encodeURI()on a query value that contains&or=. - Using
encodeURIComponent()on an already-complete URL you then try to fetch. - Encoding twice (
%2520instead of%20). Decode once, or encode only raw input. - Treating
+as a space indecodeURIComponent.+is form-urlencoded (application/x-www-form-urlencoded), not the same as URI component encoding.
Try both encodings on one string
Paste a URL or a single parameter into the URL Encoder & Decoder and switch between URL encode (encodeURI) and component encode (encodeURIComponent). If you are inspecting a JWT next, the payload is Base64URL, not percent-encoding — see How to Decode a JWT.
Frequently asked questions
- When should I use encodeURIComponent?
- Use it for one path segment or one query parameter value. That is the usual choice when building a URL from user input.
- When should I use encodeURI?
- Use it when you already have a full URL and only need to encode spaces or non-ASCII characters without breaking :, /, ?, or #.
- Why did my query parameter split into two parameters?
- An unencoded & in the value starts a new query pair. Encode that value with encodeURIComponent before concatenating.
- Is encodeURI the same as percent-encoding a URL in the browser?
- It is one JavaScript API for percent-encoding a complete URL. Other environments (Python urllib, Go url.QueryEscape) have their own rules. Compare outputs before you copy them into production.