URL encode & decode

Why URLs need encoding

A URL can only carry a limited set of characters, and some of those characters have jobs. The question mark starts the query string, the ampersand separates parameters, the equals sign joins a name to its value and the hash marks a fragment. Anything else, spaces, accents, emoji, or a character that would be mistaken for one of those separators, has to travel in disguise: a percent sign followed by the byte value in hexadecimal. A space becomes %20, an ampersand becomes %26 and e acute becomes %C3%A9, two bytes because UTF-8 uses two bytes for it.

Everything on this page runs in your browser, so URLs, tokens and query strings you paste here are never uploaded anywhere.

Component or whole URL?

This is the decision that matters, and picking wrong is the classic bug. Component mode (encodeURIComponent) encodes everything with special meaning, including / ? & = and :, so it is correct for a single value you are about to drop into a query string. Whole URL mode (encodeURI) leaves those structural characters alone and only encodes characters that cannot appear in a URL at all, so an existing address survives with its slashes and question mark intact.

Notice the whole URL result keeps the ampersand as it is, because encodeURI cannot know whether it is a separator or part of the text. If the ampersand is genuinely part of a value, encode that value on its own in component mode and then assemble the URL.

Decoding and the errors you will meet

Decoding reverses the process, turning %-sequences back into characters. It fails, with an error rather than a wrong answer, when a percent sign is not followed by two valid hexadecimal digits. That usually means one of two things: the string was cut short somewhere in transit, or it contains a literal percent sign that was never encoded, such as a discount code like 50%OFF. The fix at the source is to encode the percent sign itself as %25.

One more quirk worth knowing: an old convention encodes spaces in query strings as + rather than %20. JavaScript's decoder does not translate + back into a space, so if a decoded string still shows plus signs where spaces should be, that is why. Replace them manually or decode with the source system's own tools.

Where you will use this

Day to day, this tool earns its keep building API requests by hand, debugging webhook payloads, reading the real destination out of tracking links, crafting mailto links with subject lines, and making UTM-tagged campaign URLs that do not fall apart when the campaign name contains spaces or ampersands. If you are cleaning a page title into a URL-friendly form rather than encoding it, you want the slug generator instead: encoding preserves every character, while slugs deliberately throw the awkward ones away.

Frequently asked questions

Related tools