URL Encode / Decode
Percent-encode query values, Unicode, and emoji. Component or full.
Blog

encodeURIComponent vs encodeURI: Which One and When

The most common URL-encoding bug is mixing up these two. Here is when to use each, with query values, whole URLs, and the + gotcha.

A developer-style cover on a teal background with the large words 'URL Encoding' beside cards for component, full, percent, and the plus gotcha.

You build a search link, paste a keyword into the URL, and clicking it lands on the wrong page. Or a & sneaks into a parameter value and everything after it vanishes. The cause is almost always the wrong encoding function. URL encoding comes down to the difference between two of them.

Component or full: decide the scope first

JavaScript gives you two URL-encoding functions. The difference is whether they touch reserved characters.

encodeURIComponent (component mode) percent-encodes the reserved characters too, things like / ? # & =. Reach for it when you are handling one value or one path segment. encodeURI (full mode) leaves those delimiters intact, so it is for encoding a whole, already-shaped address. The MDN reference splits them the same way by purpose. Pick the wrong one and the bug starts there.

A value with reserved characters needs component

This is where it breaks most often: a & or = living inside a parameter value.

Say the value is a=1&b=2. Run it through the PiPi Worlds URL encoder in component mode and you get a%3D1%26b%3D2. The = and & become %3D and %26, so the whole thing rides along as a single value. Encode it with full mode instead and it stays a=1&b=2. Drop that into ?x=a=1&b=2 and the server reads &b=2 as a separate parameter, and your data is mangled. For values, component is the answer.

Encoding a whole URL calls for full

The opposite case shows up too, when you already have a complete URL to encode.

Take https://pipi-worlds.com/a b?q=café. In full mode it becomes https://pipi-worlds.com/a%20b?q=caf%C3%A9. The ://, /, ?, and = stay put, and only the space and the accented letter turn into percent sequences. Use component here and you get https%3A%2F%2Fpipi-worlds.com..., with the scheme delimiters escaped and the address itself broken. When the scope is the whole URL, full is right.

When a ’+’ quietly becomes a space

Decoding has its own trap, and it is the + sign. The same a+b decodes two different ways depending on where it came from.

In application/x-www-form-urlencoded data, which is how HTML forms submit, a space is written as +. In a plain URL, + is just a plus. So decoding a+b in the tool gives a+b when ‘treat + as space’ is off, and a b when it is on. Match the toggle to whether the string came from a form or a URL.

When you do not know what that percent blob is

The last case is on the receiving end. You find %C3%A9... in a log or a redirect URL, but you cannot tell at a glance whether it is form data or a URL fragment, or how to read the +.

The PiPi Worlds URL encoder lets you flip component, full, and the ‘plus as space’ toggle and compare the output side by side, and every conversion runs in your browser, so the input is never sent anywhere. A broken sequence, like a truncated %, comes back as an error rather than garbage. If the value inside the URL is base64, the Base64 tool takes it next, and if it is a chunk of JSON, the JSON formatter does.

Frequently asked questions

What is the difference between encodeURIComponent and encodeURI?
encodeURIComponent percent-encodes reserved characters too, like `/ ?
Which one should I use for a query parameter value?
Use encodeURIComponent. If the value contains `&` or `=`, encodeURI leaves them as is and your parameter boundaries break. For example, the value `a=1&b=2` becomes `a%3D1%26b%3D2` with encodeURIComponent, so it travels safely as one value.
Why did a '+' turn into a space when I decoded?
In `application/x-www-form-urlencoded` data, which is how HTML forms submit, a space is written as `+`. In a plain URL, `+` is a literal plus. So when decoding, toggle 'treat + as space' to match where the string came from.
What happens to non-ASCII characters like emoji in a URL?
They encode to UTF-8 percent sequences. The string 'café' becomes `caf%C3%A9`, and decoding restores it exactly. Broken sequences, such as a truncated `%`, are reported as an error instead of returning garbage.
Is the value I paste sent to a server?
No. The PiPi Worlds URL encoder runs every conversion in your browser, so your input is never transmitted. Just remember that anything placed in a URL can end up in server logs and browser history regardless of encoding.

Sources

Written by the PiFl Labs content team from public sources and reviewed in-house before publishing.

Last reviewed:

Back to the tool →