How the URL Encode Calculator Works
A web address can only contain a limited set of characters. Letters, numbers and a few symbols are safe. Everything else, such as a space, an accent, an emoji, or a symbol that has a special meaning in an address, has to be written in a safe form. This is called URL encoding, or percent encoding. The URL Encoder and Decoder turns text into that safe form, and turns it back again.
What you enter
- What you want to do: encode a piece of text or one part of a URL, encode a whole URL, or decode.
- The text: a URL, a search term, or any text. To decode, paste the encoded text.
- Spaces or plus signs: whether a space is written as %20 or as a plus sign, which is how web forms do it. When decoding, it decides if a plus sign is read as a space.
How percent encoding works
Each unsafe character is turned into its bytes in UTF-8, and each byte is written as a percent sign followed by two hex digits. A space is one byte, hex 20, so it becomes %20. A letter with an accent, such as é, is two bytes, so it becomes %C3%A9.
space -> %20 é -> %C3%A9 € -> %E2%82%AC 😀 -> %F0%9F%98%80
These characters are never changed, because they are always safe: the letters A to Z and a to z, the digits 0 to 9, and the symbols - _ . ~ (hyphen, underscore, dot and tilde).
Encode a part, or encode a whole URL?
Some symbols have a job in a web address. The slash separates folders, the question mark starts the query, the ampersand separates values, and so on. What you should do with them depends on what you are encoding:
- A part of a URL, such as a search term or a value in the query. Use the first mode. It encodes every symbol that has a special meaning, so that it cannot be confused with the structure of the address. This is the mode of the JavaScript function encodeURIComponent.
- A whole URL. Use the second mode. It keeps the symbols that build the address (: / ? # & = + $ , ; @) and only encodes what is unsafe, like spaces and accents. This is the mode of encodeURI.
A worked example
The text is https://example.com/?search=hello world, which is 39 characters long.
| Mode | Result | Length |
|---|---|---|
| Encode a part (encodeURIComponent) | https%3A%2F%2Fexample.com%2F%3Fsearch%3Dhello%20world | 53 |
| Encode a whole URL (encodeURI) | https://example.com/?search=hello%20world | 41 |
- Mode: Encode a part (encodeURIComponent)
Result: https%3A%2F%2Fexample.com%2F%3Fsearch%3Dhello%20world
Length: 53 - Mode: Encode a whole URL (encodeURI)
Result: https://example.com/?search=hello%20world
Length: 41
Original █████████████████████████████ 39 Whole URL ███████████████████████████████ 41 Encoded part ████████████████████████████████████████ 53
For a whole address, the second result is the useful one. It still works as a link. The first result has changed the colon, the slashes and the question mark into codes, so it no longer works as an address. It would be correct only if you were putting this whole text inside another URL, for example as the value of a "redirect" parameter.
Characters and their codes
| Character | Code | Character | Code | Character | Code |
|---|---|---|---|---|---|
| space | %20 | & | %26 | / | %2F |
| ! | %21 | ' | %27 | : | %3A |
| " | %22 | + | %2B | ; | %3B |
| # | %23 | , | %2C | = | %3D |
| $ | %24 | ? | %3F | @ | %40 |
| % | %25 | < | %3C | > | %3E |
Chart: how long is each character after encoding?
An ordinary letter stays one character. Other characters grow, because each byte takes three characters. Each block is one third of a character.
a ███ 1 character space █████████ 3 characters (%20) é ██████████████████ 6 characters (%C3%A9) € ███████████████████████████ 9 characters (%E2%82%AC) 😀 ████████████████████████████████████ 12 characters (%F0%9F%98%80)
So text in many languages, or with emoji, becomes much longer when encoded. Web browsers and servers put limits on the length of an address, so keep an eye on it.
Plus signs and spaces
In an old web-form format, a space in a query is written as a plus sign instead of %20. Both are understood in the query part of an address, but only %20 is correct in the path part. Choose the plus sign only if the system that receives the text expects it. When decoding, choose "Read them as spaces" if the text came from a web form, and "Keep them as plus signs" if the plus signs are real, for example in a phone number or in an email address with a tag.
Decoding, and what can go wrong
Decoding turns each percent code back into its byte, and joins the bytes into text. It can fail in two ways, and the tool tells you which:
- A percent sign that is not followed by two hex digits. For example, "100% sure" cannot be decoded, because the % is followed by a space. A real percent sign must be written as %25.
- Codes that do not make a whole character. A character like € needs all three codes, %E2%82%AC. If only %E2%82 is there, it is broken.
Tips
- Encode each value on its own, and then build the URL. If you encode a finished URL with the "part" mode, it stops working.
- Do not encode twice. A % sign would become %25, and %20 would turn into %2520. If you see %25 in a URL, it was probably encoded twice. Decode it once to check.
- Use the "whole URL" mode to fix a link that has spaces or accents.
- Encoding is not encryption. Anyone can decode it. Do not use it to hide a password or private data.
What this tool does not include
- Base64 encoding and HTML encoding, which are different formats.
- Checking that a URL is valid, or that the address exists.
- Internationalized domain names, such as an address with accents in the domain name, which use a different format called Punycode.
This tool gives a general conversion. Check the result before you use it in a live system.