URL Encoder & Decoder

URL / percent-encoding replaces characters that are unsafe or ambiguous in a URL with % followed by their UTF-8 byte value in hex. Component mode uses encodeURIComponent() and encodes every reserved character — correct for values you embed in a query string or path. Full URL mode uses encodeURI(), which preserves URL-structural characters like :/?#&=.

Example

Input:

hello world & café / 日本語

Encoded as Component:

hello%20world%20%26%20caf%C3%A9%20%2F%20%E6%97%A5%E6%9C%AC%E8%AA%9E

Encoded as Full URL:

hello%20world%20&%20caf%C3%A9%20/%20%E6%97%A5%E6%9C%AC%E8%AA%9E

Notice that Full URL left the & and / alone because they have structural meaning in a URL.

Common errors and pitfalls

Most encoding issues come from picking the wrong mode or running the tool twice on the same input. The items below cover the cases we see most often.

• Using encodeURI for query values. encodeURI("a&b=c") gives a&b=c (unchanged), which breaks the query string. Use Component mode (encodeURIComponent) for values.
• Double-encoding. Encoding hello%20world a second time produces hello%2520world. Decode first or skip one layer.
• Forgetting #. A # inside a query value is treated as the fragment start unless encoded as %23.
• Plus sign confusion. + means space in form-encoded bodies but is a literal + in a URL path or query. To send a real plus sign in a query value, encode it as %2B.
• Malformed percent sequence. A literal % that was never encoded causes decodeURIComponent to throw URI malformed. Either encode the % as %25 or strip lone percents before decoding.
• UTF-8 vs Latin-1 legacy servers. This tool always uses UTF-8. Some very old systems expect Latin-1 / windows-1252 — é there is %E9, not %C3%A9. If you see mojibake, the other end is not UTF-8.

What is the difference between encodeURI and encodeURIComponent?

encodeURIComponent escapes everything that is not a letter, digit, or one of -_.!~*'(), so it is safe for individual query values and path segments. encodeURI leaves URL-reserved characters like :/?#&= alone, so it is for encoding an entire URL that already has structure. Use Component 95% of the time; use Full URL only when you have a mostly-valid URL with stray spaces or Unicode.

What characters actually need encoding in a query string?

The query string delimiters & and = must be encoded inside a value (otherwise they look like separators). Space becomes %20 or +. The # fragment marker must be encoded. Plus: /, ?, anything non-ASCII, and control characters. encodeURIComponent handles all of these; encodeURI leaves &, =, /, ?, # unencoded because they are URL-structural.

Why is my URL getting double-encoded?

Double-encoding happens when you encode a value that is already encoded. A space becomes %20, then the % itself becomes %25, giving %2520. Usually caused by passing an already-encoded URL through encodeURIComponent again, or by a framework that auto-encodes on top of your manual encoding. Decode once and re-encode cleanly, or skip one layer.

How does this handle non-ASCII characters like emoji or accented letters?

JavaScript's encoders convert non-ASCII characters to UTF-8 bytes first, then percent-encode each byte. So é becomes %C3%A9 (two bytes) and an emoji like 😀 becomes %F0%9F%98%80 (four bytes). Decoding reverses the process. This is the standard RFC 3986 behaviour and works with every modern server.

Why does decoding fail with "URI malformed"?

decodeURIComponent throws when it sees an invalid percent sequence — a lone % not followed by two hex digits (e.g. %ZZ or just %), or UTF-8 byte sequences that are not valid (e.g. %C3 without a valid continuation byte). Common causes: a literal % in the input that was never encoded, or a string that was already decoded once and still has percent signs in it.

Should spaces become + or %20?

Both are seen in the wild. %20 is correct everywhere — in paths, query strings, and fragments. The + shortcut only means "space" inside the application/x-www-form-urlencoded format used by HTML form submissions. This tool uses %20 because encodeURIComponent does. If you need + specifically, replace %20 with + after encoding.