URL encoder and decoder — and which of the two functions you actually want
Percent-encode text for a URL, or decode an encoded one back to readable characters, live as you type. Both encodeURIComponent and encodeURI are offered side by side with the exact characters that differ for your input highlighted, because picking the wrong one is the single most common reason a query string arrives broken. Nothing is uploaded or saved.
- Nothing is uploaded or saved
- Works offline
encodeURIComponent — escapes ; , / ? : @ & = + $ # as well. Use it for one value going inside a URL.
cats%20%26%20dogs%20%2F%2050%25%20off%3F
These characters are escaped by encodeURIComponent and left untouched by encodeURI. Inside a value they are data and must be escaped; in a whole address they are structure and must not be.
- /%2F
- ?%3F
- &%26
How it works
- 1
Encode or decode
Switch direction at the top. Encoding runs on every keystroke; decoding does too, and a malformed escape gets a sentence pointing at the character position rather than a thrown error or an empty box.
- 2
Choose component or full URI
Use component encoding for one value that is going inside a URL — a search term, a filename, a redirect target. Use full-URI encoding when you have a whole address and only want the unsafe characters fixed, such as spaces someone typed into a link. The choice sits in the output panel because it changes the output and nothing else.
- 3
Read the difference for your own text
Below the result, every character in your input that the two functions treat differently is listed with the escape it becomes. If that list is empty, both functions give you the same answer and the choice does not matter this time — which is worth knowing too.
- 4
Turn on “+ means space” only for form data
Query strings produced by HTML forms encode a space as “+”. Nowhere else in a URL does “+” mean anything but a plus sign, so this is an explicit toggle rather than a guess — switching it on blindly would corrupt every email address and every timestamp carrying a timezone offset.
Frequently asked questions
What is the actual difference between encodeURI and encodeURIComponent?
Eleven characters: ; , / ? : @ & = + $ and #. encodeURI leaves all of them alone because they are the structure of a URL, while encodeURIComponent escapes every one of them because inside a value they are not structure, they are data. Everything else — spaces, accents, quotes, emoji — is treated identically by both.
Show me a query string that breaks.
Take the search term “cats & dogs” and build https://example.com/search?q=cats & dogs. Running encodeURI over the whole address gives ?q=cats%20&%20dogs — the space is fixed, but the ampersand survives, so the server reads two parameters: q=cats and a second empty one. Running encodeURIComponent over the whole address is worse: the “:”, “/”, “?” and “=” all get escaped and you no longer have a URL at all. The correct move is to encode only the value: ?q=cats%20%26%20dogs, which arrives as the three words you meant.
Why is my “+” turning into a space, or my space into a “+”?
Because application/x-www-form-urlencoded — the format HTML forms submit in — defines “+” as a space, and that convention leaked into a lot of query-string handling. It is not part of the general URL rules. So “a+b” from a form means “a b”, while the same text in a path segment means literally “a+b”. That is why the toggle exists here instead of being applied automatically; encodeURIComponent itself escapes a real plus sign as %2B, which is unambiguous either way.
Why is a percent sign special?
Because it starts an escape. In an encoded URL every “%” is followed by exactly two hex digits naming a byte, so a literal percent sign has to be written %25. A string containing a bare “%” followed by anything else is not decodable, and the decoder above says so and points at the position instead of failing silently — “50% off” is the usual culprit.
How are accents and emoji encoded?
The character is converted to UTF-8 bytes and each byte becomes its own %XX escape. “é” is two bytes and becomes %C3%A9; a single emoji is four bytes and becomes four escapes. That is also why decoding can fail on well-formed-looking input: if half of a multi-byte sequence was cut off, every escape is individually valid but together they are not a character.
Should I encode the whole URL or just the parts?
Just the parts, nearly always. Build the address from pieces and run encodeURIComponent over each value you drop into it. Encoding a finished URL is a repair job for input someone typed by hand, not a step in constructing one — and running it twice is its own bug, since the “%” in %20 gets escaped to %2520.
Is anything I paste sent anywhere?
No. Encoding and decoding both run in this page using the browser’s own functions, and nothing is written to localStorage. That matters here specifically, because the URLs people bring to a tool like this are usually internal ones — admin panels, staging hosts, links carrying a token in the query string.