URL encoder and decoder

How to use

The tool has two tabs.

• Encode / decode: pick the operation and the type (Component or Full URL), then type or paste your text. The result updates as you type, with the output of both functions side by side for comparison. Swap uses the result as the new input. If decoding hits an invalid sequence, the tool shows the exact snippet and column and gives you a partial result.
• Parse URL: paste a full address to see its scheme, host, path, fragment and every query parameter in an editable table. Change a value, delete or add parameters, then copy the rebuilt URL. Parameters you didn't touch stay exactly as they were.

What URL encoding is

A URL can only contain a limited set of characters. Spaces, accented letters, emoji and symbols with a special meaning (such as &, ? and #) have to be written as percent sequences: a % followed by two hex digits for each byte of the character in UTF-8. So a space becomes %20, é becomes %C3%A9 (two bytes) and 😀 becomes %F0%9F%98%80 (four bytes). Decoding goes the other way.

encodeURIComponent or encodeURI?

Both JavaScript functions encode spaces, accented letters and emoji. The difference is the URL separators: ; , / ? : @ & = + $ #.

• encodeURIComponent encodes the separators too. Use it for a piece of a URL: a query value, a search term, a path segment. For example, the term bread & coffee becomes bread%20%26%20coffee, so the & isn't mistaken for the start of another parameter.
• encodeURI keeps the separators. Use it on a whole URL that only has spaces or accented letters: in https://site.com/café?q=a b, it only replaces the é (with %C3%A9) and the space (with %20), leaving :, / and ? alone, so the structure stays intact.

When in doubt, build the URL piece by piece and apply encodeURIComponent to each value. It's the safest approach.

%20 or +?

Both can stand for a space, but in different places. HTML forms send data as application/x-www-form-urlencoded, where a space becomes + and a real plus sign becomes %2B. That's why, in a query string, ?q=a+b is usually read as "a b". In the URL path, though, + is just a plus sign. The Space as + option applies the form rule in both directions.

Anatomy of a URL

A shop address like https://shop.com:8080 + /search/coffee + ?q=latte&page=2 + #results (all together, no spaces) breaks down like this:

• Scheme: https:
• Host: shop.com, with port 8080 (optional)
• Path: /search/coffee
• Query: q=latte&page=2, key=value pairs separated by &
• Fragment: #results, which points to a part of the page and is never sent to the server

Without a scheme (shop.com/search), the parser assumes https:// and tells you.

Common pitfalls

• Double encoding: encoding text that was already encoded turns %20 into %2520. If your text already has %XX sequences, the tool warns you.
• encodeURIComponent on a whole URL: the result (https%3A%2F%2F…) no longer works as a link. Encode only the values.
• encodeURI on a query value: an & or = inside the value passes through untouched and breaks the query.
• Non-ASCII domains: browsers convert café.com to xn--caf-dma.com (Punycode). The parser shows both forms.
• + in values: a phone number like +1 555… sent unencoded may arrive as a space. Encode the + as %2B.
• Broken sequences: a stray % (as in "100% free") or incomplete UTF-8 bytes make decodeURIComponent fail. Here you see exactly where the problem is.

Privacy

Everything happens in your browser. Nothing you type is sent to a server or stored, and the tool keeps working offline once loaded. Still, avoid sharing URLs that carry passwords or tokens.