URL Encoding Explained With Examples

A simple URL encoded example

Say you want to search for tea & coffee. The & sign already means “next parameter” in a link, and the spaces are not allowed, so the text is written like this:

tea & coffee
tea%20%26%20coffee

A space became %20, and & became %26. The number after the % is the character's code in hex. Letters, digits and - _ . ~ are left as they are. Text outside English, such as नमस्ते, is first turned into UTF-8 bytes and every byte gets its own code, which is why it turns into a long string like %E0%A4%A8%E0%A4%AE%E0%A4%B8%E0%A5%8D%E0%A4%A4%E0%A5%87.

Where you see URL encoded data

• Query strings: everything after the ? in a link, for example /search?q=tea%20%26%20coffee&page=2. Each name=value pair is separated by &.
• Form data: when a form is sent, the body is often application/x-www-form-urlencoded, the same name=value&name=value layout, written in the request body instead of the link.
• Redirect and share links: long links from social sites carry another full address inside one parameter, encoded.
• APIs and logs: values with spaces or symbols appear encoded in server logs and API documentation.

How to decode a URL

1. Open the URL Encoder & Decoder.
2. Choose Decode and paste the encoded text or the whole link.
3. Leave Component selected to decode every code, including %2F, %3A and %26. Choose Full URL only if you want the codes for : / ? & = # left as they are.
4. If the link has parameters, a table lists each name and its decoded value.
5. Press Copy result. If you still see %25 or %2520 in the result, the text was encoded twice: press Decode again.

Space: %20 or +?

Both appear in real links. %20 is a space everywhere. A + means a space only in form data and query strings, a leftover from old HTML forms. In the path part of a link (before the ?), a + is just a plus sign. If you decode form data, turn on the plus option so that a+b becomes “a b”. If you decode a path, leave it off.

A real plus sign inside a value must be written %2B. If it is left as +, the receiving page reads it as a space. This is the usual reason a value arrives with spaces where it should have a plus.

URL encoded JSON and Base64

JSON contains { } " : and , which are not safe in a link, so JSON placed in a parameter must be URL encoded: {"a":1} becomes %7B%22a%22%3A1%7D. Decode it here, then paste the result into the JSON Formatter to read it.

Base64 is trickier because standard Base64 uses +, / and =, and all three have meaning in a URL. Either URL encode the Base64 text (+ becomes %2B, / becomes %2F, = becomes %3D), or use URL-safe Base64, which uses - and _ instead and drops the = padding. To read a Base64 value from a link: URL decode it first, then Base64 decode it.

Component or Full URL?

• Component (encodeURIComponent and decodeURIComponent) converts every unsafe character, including / ? & = # and :. Use it to encode one value, and to decode anything completely.
• Full URL (encodeURI and decodeURI) keeps those characters, so the address still works. Use it to make a whole address safe. When decoding, it leaves codes such as %2F and %3F as they are.
• Never run Component on a whole address, or https://example.com/a becomes https%3A%2F%2Fexample.com%2Fa and stops being a link.

URL encoding is not encryption. Anyone can decode it in a second, so do not use it to hide a password or a token.