URL Encoding Examples

A reference list of real inputs and their encoded output, for when you just need to check one — not the mechanism behind it (see URL Encoding Explained for that) or which characters trigger it (see What Characters Need URL Encoding?). Every example here uses encodeURIComponent-style encoding — the right choice for a single value going into a URL, as opposed to encodeURI, which is for a value that's already a whole URL.

Everyday text

Notice John's — the apostrophe is left unencoded. RFC 3986 calls it reserved, but encodeURIComponent leaves it (and ! ~ * ( )) alone anyway, a historical quirk covered in What Characters Need URL Encoding?. It's valid either way — a decoder doesn't care whether it arrived encoded or not.

Email addresses

The second one matters: if that + is left literal in a query parameter value, it decodes as a space, silently turning the address into jane newsletter@example.com. Encoding it as %2B is what keeps it a plus sign.

A search query going into a URL

A URL used as a parameter value

Redirect and callback parameters carry a full URL as their value — that inner URL's own :, /, and ? all have to be encoded, or they get read as part of the outer URL's structure instead of as opaque parameter data:

Dropped into a redirect parameter: ?next=https%3A%2F%2Fexample.com%2Fsuccess%3Fid%3D42. Left unencoded, the outer query parser would see next, id, and possibly a broken path, instead of one clean value — the exact bug this encoding exists to prevent. This is also the shape URL Inspector's open-redirect finding looks for.

Non-Latin scripts and emoji

Each non-ASCII character costs multiple %XX groups — one per UTF-8 byte, not one per character. 東 alone is three bytes, so it becomes three separate %XX groups. This is why a short string in these scripts can turn into a surprisingly long encoded one.

Arrays and structured values in a query string

That second one is {"status":"active"} encoded — every {, ", :, and } escaped, since none of them are safe left literal in a query value. It's valid, but it's also exactly the kind of value worth asking whether it should be a JSON request body instead — see How Query Parameters Work for that trade-off.

Component encoding vs. full-URI encoding, side by side

The same input produces different output depending on which you use — this is the distinction that trips people up most:

Run the whole URL through encodeURIComponent and you get a value safe to embed inside another URL (like the redirect-parameter example above) — but it's no longer usable as a URL on its own until decoded again.

Try it yourself

Encode or decode any of these with URL Encode and URL Decode — both offer component and full-URI modes so you can reproduce the difference in the last example directly. All run entirely in your browser.