What is URL encoding?
A URL can only contain a small set of characters, and some of them have special jobs: ? starts the query, & separates parameters, = joins a name to its value, # starts a fragment and / separates path segments. If your data contains one of these, or a space, or a letter such as é, it has to be rewritten before it goes into a URL.
URL encoding, also called percent-encoding, does exactly that. Each unsafe byte is written as a percent sign followed by two hexadecimal digits. A space becomes %20 and an ampersand becomes %26.
How percent-encoding works
The text is first turned into UTF-8 bytes, and every byte that isn't safe is written as %XX, where XX is the byte in hexadecimal. A plain ASCII character is one byte and gives one code. Other characters take several bytes and give several codes:
space -> %20
& -> %26
é -> %C3%A9
€ -> %E2%82%ACThat's why a single non-English letter can turn into two or three codes. The server that receives the URL puts the bytes back together and reads them as UTF-8.
A worked example
Say you want to pass this text as the value of a query parameter:
name=Ali & Sara, city=Lahore?Left as it is, the = and & would be read as part of the URL's own structure. Encoded, the whole text is safe:
name%3DAli%20%26%20Sara%2C%20city%3DLahore%3FWhich characters stay unchanged?
This tool follows the behavior of JavaScript's encodeURIComponent. It leaves these characters as they are:
- Letters A to Z and a to z
- Digits 0 to 9
- The symbols
-_.!~*'(and)
Everything else is encoded, including spaces and the characters that have a special meaning in URLs: / ? : @ & = + $ , ; and #.
Encode a value, not a link
This tool encodes everything that has a special meaning in a URL. That is exactly right for a single value and wrong for a link you want people to click. Encode a complete address and its structure is gone:
https://example.com/search?q=cats
https%3A%2F%2Fexample.com%2Fsearch%3Fq%3DcatsThe second line is no longer a working link. There is one important exception: when a complete address is itself the value of a query parameter, such as a redirect address, encode all of it.
https://example.com/login?redirect=https%3A%2F%2Fexample.com%2Faccount%3Ftab%3DsettingsSpaces: %20 or a plus sign?
Both appear in real URLs. %20 is understood everywhere, including in the path of a URL. A plus sign for a space belongs to HTML form data (application/x-www-form-urlencoded), which is also how many query strings are written. In a path, a plus is just a plus.
This tool writes %20 by default because it's always safe. Tick Write spaces as + when you need the form style. A real plus sign in your text is written as %2B either way, so it can never be mistaken for a space.
Common mistakes
- Encoding twice. A % in text that is already encoded becomes %25, so %20 turns into %2520 and the server reads the wrong thing.
- Leaving an & or = inside a value. The server then splits your value into several parameters.
- Using + for spaces in a path. Outside form data, a plus sign is a real plus sign.
- Encoding a complete link that people should click, instead of encoding only its values.
- Pasting text that is already encoded. If it already contains codes such as %20, decode it first with URL Decode.
URL encoding in your own code
const text = "name=Ali & Sara, city=Lahore?";
const encoded = encodeURIComponent(text);
console.log(encoded); // name%3DAli%20%26%20Sara%2C%20city%3DLahore%3Ffrom urllib.parse import quote
text = "name=Ali & Sara, city=Lahore?"
encoded = quote(text, safe="!*'()")
print(encoded) # name%3DAli%20%26%20Sara%2C%20city%3DLahore%3FIs it safe to paste private text here?
The encoding runs in your browser, and what you paste is not sent to our servers. The Privacy Policy has the details.