URL Encoder and Decoder
| Character | Component | Whole URL | Form |
|---|---|---|---|
| space | %20 | %20 | + |
| / | %2F | / | %2F |
| ? | %3F | ? | %3F |
| & | %26 | & | %26 |
| = | %3D | = | %3D |
| # | %23 | # | %23 |
| : | %3A | : | %3A |
| + | %2B | + | %2B |
| @ | %40 | @ | %40 |
The encoder percent-encodes and decodes text, with the three encodings that actually differ from each other exposed as a choice. Picking the wrong one is the usual cause of a query string that looks encoded and still breaks, so the page shows exactly which characters each mode leaves alone.
How it works
Percent-encoding replaces a character with a % followed by its byte value in hexadecimal. Characters above 127 become several percent-escapes, one per UTF-8 byte, which is why an accented letter produces two.
- Component encoding escapes everything reserved, including / ? & = # and :. Use it for a single query value or path segment. This is encodeURIComponent.
- Whole-URL encoding leaves the structural characters alone so the URL still works. Use it on a complete address with a space or an accent in it. This is encodeURI.
- Form encoding is component encoding with one difference: a space becomes + instead of %20. It is what a browser sends for a normal form submission.
The difference bites when a URL is placed inside another URL. A redirect target passed as a query parameter must be component-encoded, or its own ? and & are read as part of the outer query string and the parameters merge.
Examples
A value for a query string
Text
café & cream
Mode
Component
Result
caf%C3%A9%20%26%20cream
The é becomes two escapes because it is two UTF-8 bytes. The ampersand must be escaped or it would start a new parameter.
The same text as form data
Mode
Form data
Result
caf%C3%A9+%26+cream
Identical except the spaces. A + in form-encoded data means a space, which is why decoding form data as a plain URL leaves stray plus signs.
A whole URL
Text
https://example.com/search?q=a b
Mode
Whole URL
Result
https://example.com/search?q=a%20b
Only the space is escaped. Component encoding would escape the colon, slashes and question mark too, leaving something that is no longer a URL.
Frequently asked questions
Which of the three encodings do I want?
Component for a single value going into a query string or path segment. That is the common case and the safe default. Whole URL only when you are encoding an entire address that must keep working. Form data when you are constructing a request body by hand.
Why does my decoded text have plus signs in it?
Because it was form-encoded, where + means a space, and you decoded it as ordinary percent-encoding, which leaves + alone. Switch to form mode and the spaces come back correctly.
Why does one accented letter produce two escapes?
Because percent-encoding works on bytes, not characters, and é is two bytes in UTF-8. An emoji is four bytes and produces four escapes. The escapes recombine into the original character on decode.
When do I need to encode something twice?
When a URL is carried inside another URL, a redirect target in a query parameter, for instance. The inner URL is component-encoded so its own separators do not terminate the outer query string. Forgetting this is why redirect parameters so often lose everything after their first ampersand.
Why did decoding fail with a malformed sequence?
Because a % in the input is not followed by two hexadecimal digits. Usually the text was never encoded and contains a literal percent sign (a "50% off" string, for example) which has to be escaped as %25 before it can be decoded as a whole.