Encode / Decode
`encodeURI` and `encodeURIComponent` are not the same function. Using the wrong one is why `?q=a+b` is a space in one API and a plus sign in the other.
encodeURI and encodeURIComponent are not the same function. Using the wrong one is why ?q=a+b is a space in one API and a plus sign in the other.
Paste the string. Encode for a query value with encodeURIComponent. Encode a full URL with encodeURI. If you needed + for spaces, that’s form-urlencoded, not a URL.
How to use it
encodeURIComponentencodes everything that would break a component, including&,=,?,/. Use it on values you drop into a query string.encodeURIleaves?,&,/,:so a whole URL stays a URL. Use it on a complete link, never on a single parameter.- Spaces become
%20in URI encoding. They become+inapplication/x-www-form-urlencoded. Mixing those is the classic+vs%20bug. - Decode once.
%2520means someone encoded twice. Decode twice only if you meant to.
When it breaks
#,?, and&inside a value must be component-encoded or they steal the URL’s structure.- Unicode should become UTF-8 percent-bytes (
é→%C3%A9), not Latin-1. If you see%E9, that’s the old mess. - Don’t encode the
https://and then wonder why the browser won’t open it. That’s encodeURIComponent on a full URL.
Plain Text
URL Encoded
Encoding Modes
- • Component: Encodes all special chars (for URL parameters)
- • Full URL: Preserves URL structure characters (://?#)
- • Query: Like component, but uses + for spaces
Features
- encodeURIComponent vs encodeURI: what each leaves unescaped
- application/x-www-form-urlencoded + vs RFC 3986 %20 for spaces
- Decode that does not treat + as space unless you pick query mode
- UTF-8 percent sequences for non-ASCII (café → caf%C3%A9)
Common Use Cases
- Encode a query value that contains &, =, or /
- See why encodeURI left ? and # intact and broke your param
- Translate + from a form body into a space
- Avoid double-encoding %20 into %2520
`encodeURI` and `encodeURIComponent` are not the same function
encodeURI and encodeURIComponent are not the same function. Using the wrong one is why ?q=a+b is a space in one API and a plus sign in the other.
Paste the string. Encode for a query value with encodeURIComponent. Encode a full URL with encodeURI. If you needed + for spaces, that’s form-urlencoded, not a URL.
encodeURIComponent encodes everything that would break a component, including &, =, ?, /. Use it on values you drop into a query string. encodeURI leaves ?, &, /, : so a whole URL stays a URL. Use it on a complete link, never on a single parameter.
Spaces become %20 in URI encoding. They become + in application/x-www-form-urlencoded. Mixing those is the classic + vs %20 bug. Decode once. %2520 means someone encoded twice. Decode twice only if you meant to.
Examples
encodeURIComponent('a&b=c')
→ a%26b%3DcencodeURI('q=a&b')
→ q=a&b // still two paramsquery form: q=hello+world → space
component: q=hello%20world → space
decodeURIComponent("hello+world") → hello+worldhello world → hello%20world → hello%2520worldFrequently Asked Questions
encodeURI and encodeURIComponent are not the same function. Using the wrong one is why ?q=a+b is a space in one API and a plus sign in the other. encodeURIComponent encodes everything that would break a component, including &, =, ?, /. Use it on values you drop into a query string. encodeURI leaves ?, &, /, : so a whole URL stays a URL. Use it on a complete link, never on a single parameter.
Spaces become %20 in URI encoding. They become + in application/x-www-form-urlencoded. Mixing those is the classic + vs %20 bug. If you needed + for spaces, that’s form-urlencoded, not a URL.
Decode once. %2520 means someone encoded twice. Decode twice only if you meant to.
#, ?, and & inside a value must be component-encoded or they steal the URL’s structure. Unicode should become UTF-8 percent-bytes (é → %C3%A9), not Latin-1. If you see %E9, that’s the old mess. Don’t encode the https:// and then wonder why the browser won’t open it. That’s encodeURIComponent on a full URL.