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.

For one value, such as a query parameter: encodes everything that is not a letter, digit or - _ . ! ~ * ' ( ).

42 characters, 47 bytes
91 characters

URL examples

TextEncoded
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