URL Encode and Decode
Percent-encode a value so it is safe inside a URL, or turn a string full of %20 and %3D back into something readable.
URL examples
| Text | Encoded |
|---|---|
| fish & chips | fish%20%26%20chips Component: A space is %20 and & is %26 |
| fish & chips | fish+%26+chips Form: The space is written as + |
| a+b=c | a%2Bb%3Dc Component: + and = are encoded so they keep their literal meaning |
| café | caf%C3%A9 Component: Each UTF-8 byte of é gets its own %XX |
| https://example.com/my file.pdf?q=a b | https://example.com/my%20file.pdf?q=a%20b Whole URL: The structure is kept, only the spaces change |
| https://example.com/my file.pdf?q=a b | https%3A%2F%2Fexample.com%2Fmy%20file.pdf%3Fq%3Da%20b Component: The address itself becomes a value, ready to go in a query string |
Encoding guides
How each one works, with worked examples.
Everything happens in your browser. What you type or paste is never uploaded, stored or added to the share link, so it is safe to use with tokens, keys and customer data.
What URL encoding does
A URL may only contain a limited set of characters, and several of those, such as ? & = / and #, have a job: they separate the parts of the address. Anything else, and any of those characters used as ordinary data, has to be written as a percent sign followed by the two hex digits of each byte. A space becomes %20, an ampersand %26, and é becomes %C3%A9 because it is two bytes in UTF-8.
Component or whole URL?
This is the choice that catches people out, and it is the difference between JavaScript's encodeURIComponent and encodeURI.
- Component encodes everything except letters, digits and - _ . ! ~ * ' ( ). Use it for a single value that you are putting into a URL: a search term, a redirect address, a file name. This is the right choice nearly every time.
- Whole URL leaves the characters that give a URL its structure alone (: / ? # & = + $ , ; @) and only fixes what is never allowed, such as spaces and accents. Use it to tidy a complete address that is already put together. Using it on a value is a bug: an & inside the value would stay as it is and split the query string.
- Form is component encoding with one change: a space is written as +. It is the format browsers use when submitting a form (application/x-www-form-urlencoded), and what most servers expect in a query string.
Decoding, and the + problem
Decoding turns every %XX back into its byte and reads the bytes as UTF-8. The one ambiguity is the plus sign. In a query string or form body, + means a space; in the path of a URL it is just a plus. The + means space option is on by default because query strings are what people usually paste; switch it off when decoding a path.
If decoding fails, the usual causes are a literal % that was never encoded (it should be %25), a string that was cut off halfway through a %XX sequence, or text that was encoded in an old single-byte character set such as Latin-1, where é is %E9 rather than %C3%A9.
Frequently asked questions
- What is %20?
- A space. 20 is the hexadecimal code of the space character, and spaces are not allowed in URLs, so it is written as %20, or as + inside query strings.
- Should I use %20 or + for a space?
- %20 works everywhere in a URL. + only means a space in the query string and in form data, and is a literal plus sign in the path, so %20 is the safe choice when unsure.
- What does double encoding look like?
- If you see %2520 or %253D, the text was encoded twice: the % of %20 was itself encoded to %25. Decode it twice to get the original back, and fix the code that encodes it a second time.
- Is URL encoding the same as HTML encoding?
- No. URL encoding uses %XX and protects the structure of an address. HTML encoding uses entities such as & and protects the structure of a page. A URL placed in an HTML attribute needs both, URL encoding first.
More bits and bobs
- JWT DecoderDecode a JSON Web Token to read its header, claims and expiry in plain English, and check an HMAC signature, without the token leaving your browser.
- Cron Expression BuilderBuild or decode a crontab schedule field by field, read it in plain English and see the next five runs in any time zone.
- Regex TesterTest a JavaScript regular expression on your own text with live highlighting, groups, replace, a plain-English explanation and code for six languages.
- UK Salary CalculatorTake-home pay after income tax, National Insurance, pension and student loans, with Scottish rates, tax codes, bonuses and overtime.