Developer tools · URL encoder & decoder
encodeURI vs encodeURIComponent: which characters each one leaves alone
· How it works
url-encoding javascript developer-workflow
The two JavaScript functions differ by exactly eleven characters, and choosing the wrong one either breaks a URL or fails to escape a value. This post spells out the sets and gives a rule you can remember.
The search that returned everything because the & in 'R&D' split the query — a concrete bug from the wrong function
A search for R&D can accidentally return results for R if code constructs ?q=R&D by hand. The ampersand is a separator between query parameters; it is not preserved as part of q unless you encode the value. Choosing encodeURI for that small piece is the error, not a server bug. The safest option in application code is often URLSearchParams, but understanding the two JavaScript primitives makes existing code much easier to debug.
What both functions share — the unreserved set they never touch and the UTF-8 percent-encoding they both apply
Both methods leave ASCII letters, digits and the unreserved punctuation - _ . ! ~ * ' ( ) untouched under JavaScript’s encoding rules. They convert non-ASCII characters to UTF-8 bytes before writing percent triplets: é becomes %C3%A9, not a single Latin-1 byte. They also encode a space as %20. Percent-encoding is about preserving the structure of a URI; it is not HTML escaping, input validation or protection against malicious script on the receiving page.
The eleven characters only encodeURI preserves — ; , / ? : @ & = + $ # and why each has structural meaning in a URL
encodeURI additionally preserves eleven structural characters that encodeURIComponent encodes: ; , / ? : @ & = + $ #. For a complete address, leaving the slash and question mark alone preserves its path and query syntax. For a query value, letting & or = through would change the parameter list, while an unescaped # can start a fragment. The functions differ precisely because one is meant for a whole address and the other for a component inside that address.
A rule that holds: values get encodeURIComponent, complete URLs get encodeURI — and why 'complete URL' is rarer than it sounds
Values almost always get encodeURIComponent; complete, already-structured addresses are the less common case for encodeURI. For a URL you are constructing programmatically, use the URL API to handle path and search parameters instead of concatenating a mix of encoded and raw pieces. Do not encode an entire URL with encodeURIComponent and then expect slashes and colons to keep behaving as separators. Conversely, do not feed a user’s query term through encodeURI and leave its ampersand active.
Worked example: the same string through both functions — a table of outputs for a value with spaces, &, / and an accent
Take R&D / café as one query value. encodeURIComponent returns R%26D%20%2F%20caf%C3%A9, protecting the ampersand and slash. encodeURI returns R&D%20/%20caf%C3%A9, preserving structural punctuation; a naive ?q= prefix would now create an unintended delimiter. Both encode the space and accent, so a test using only “hello world” misses the important distinction. Compare the generated strings in ToolAcre, then paste them into a URL parser and check how many query parameters appear.
Common mistakes — encoding a full URL with encodeURIComponent, and decoding with the wrong counterpart
Encoding a full URL as one component produces %3A%2F%2F where a consumer expected ://. Decoding a whole address before validating it can reintroduce reserved separators with new meanings. Also avoid double-encoding a value already containing %26: the percent sign itself can become %25, so a second decode layer may change meaning again. Pair encodeURIComponent with decodeURIComponent for a component and treat malformed percent escapes as input errors.
What this does not cover — form encoding with +, and building URLs with URLSearchParams
HTML form query encoding uses a plus sign for a space in application/x-www-form-urlencoded, which is distinct from the %20 output of these two functions. URLSearchParams handles those form rules for you. This article does not cover path normalization, Unicode hostname conversion or deciding whether a decoded URL is safe to request; URL encoding is a representation step, not an authorization policy.
Takeaway: encode the parts, not the whole — how the URL encoder & decoder shows both modes so you can see the difference on your own input
The memorable boundary is parts versus whole: a parameter value is a part, so use encodeURIComponent or URLSearchParams. URL encoder & decoder shows both browser functions for the same string and keeps the experiment local. Test input containing &, =, #, slash and an accent before deciding that two encoders are interchangeable.