What is URL encoding?
Links can only carry a limited set of characters. Spaces, accented letters, emoji and symbols that have a job in a link, like ?, & and #, have to be written as a percent sign and two hex digits. A space becomes %20, & becomes %26 and é becomes %C3%A9.
That's percent-encoding, also called URL encoding. Decoding turns it back into readable text.
A value or a whole link?
This is the choice that trips people up. JavaScript has two functions for it, and the tool lets you pick either:
- A value (encodeURIComponent) encodes everything except letters, numbers and - _ . ! ~ * ' ( ). Use it for one piece of a link: a search term, the message in a WhatsApp link, or a URL tucked inside another URL.
- A whole link (encodeURI) keeps the characters that give a link its shape, like : / ? & = #, and encodes the rest. Use it to tidy a full link that has spaces or accented letters in it.
A rule of thumb
If you're putting text inside a link, encode it as a value. If you're fixing a link that already works apart from a few odd characters, encode it as a whole link. Encoding a full link as a value breaks it: https:// turns into https%3A%2F%2F, which browsers won't open.
Watch out for encoding twice. If you see %2520 in a link, something encoded the % of a %20 that was already there.
Plus signs and spaces
Some query strings, mostly from HTML forms, use + for spaces instead of %20. Turn on Spaces as + to encode that way, or to decode + back into spaces. Leave it off when your text might contain a real plus sign, like a phone number.
Reading query strings
The query string is everything after the ? in a link: key=value pairs joined by &. Paste a link into the reader to see each key and its decoded value. It's a quick way to check UTM tags, spot a tracking parameter or copy one value out of a long link.
Frequently asked questions
What's the difference between encodeURI and encodeURIComponent?
encodeURIComponent encodes every character that has a special meaning in links, so it's for single values. encodeURI leaves : / ? & = # alone, so it's for whole links.
Why is a space %20 in some links and + in others?
Both mean a space. %20 is standard percent-encoding; + is the older style HTML forms use in query strings.
Why won't my text decode?
Every % has to be followed by two hex digits. Text like 50% off, or a code cut short like %E2%8, can't be decoded. Fix or remove the stray %.
Is my text sent anywhere?
No. Encoding and decoding run in your browser, with the same functions JavaScript uses.