URL Encoder & Decoder
Percent-encode and decode strings correctly, and see the difference between component encoding, full-URL encoding and form encoding.
Three kinds of encoding — and why the distinction matters
Almost every broken URL someone pastes into a bug tracker is caused by picking the wrong encoding mode. Here is the difference:
| Mode | Function | Use for |
|---|---|---|
| Component | encodeURIComponent |
A single value being placed inside a URL: query parameters, path segments, fragments |
| Full URL | encodeURI |
An entire already-formed URL, preserving its delimiters such as :, /, ? and & |
| Form data | component + space-to-plus | application/x-www-form-urlencoded request bodies, where spaces become + |
A concrete comparison
| Input | Component | Full URL | Form data |
|---|---|---|---|
hello world | hello%20world | hello%20world | hello+world |
a/b | a%2Fb | a/b | a%2Fb |
100% sure | 100%25%20sure | 100%25%20sure | 100%25+sure |
a+b | a%2Bb | a+b | a%2Bb |
https://x.com/?q=1 | https%3A%2F%2Fx.com%2F%3Fq%3D1 | https://x.com/?q=1 | https%3A%2F%2Fx.com%2F%3Fq%3D1 |
Note how component encoding escapes the / and : characters. That is intentional:
it guarantees the value cannot terminate the surrounding URL structure. Encoding a whole URL with
encodeURIComponent produces something useless as a link, which is why the two modes exist.
The + trap. In form encoding a plus sign means a space, so a literal plus
must be written as %2B. This asymmetry is why a value containing + silently
becomes a space when it round-trips through a form submission.
Privacy. Encoding happens in your browser. Nothing you type here is uploaded, which makes it safe to work with real production URLs containing tokens.
Frequently asked questions
Which mode should I use for a query parameter?
Component encoding — always. Encode each value separately and join them with &, rather than encoding the assembled string.
Why does decoding fail with a URIError?
A stray % that is not followed by two hexadecimal digits cannot be decoded. Use Encode first to escape it into %25.
Do I need to encode non-ASCII characters?
Browsers display UTF-8 characters directly in the address bar, but the underlying request still uses percent-encoded UTF-8 bytes. Encoding explicitly keeps URLs portable across servers, proxies and logging systems.
Should I encode spaces as %20 or + ?
%20 is always correct. + is only meaningful within a form-encoded body, where it is the conventional representation of a space.
Is there a length limit?
No. Everything is computed locally on your device.