Percent-encodes text so it survives inside a URL. There are three different jobs here and using the wrong one is the single most common URL-encoding mistake, so they are separate modes rather than a single guess.
The three modes, and when each is right
Query value or path segment — encodes everything that is not an unreserved character, including /, ?, &, = and #. Use it for a single value you are putting into a URL. This is what encodeURIComponent does, plus !'()* which it inexplicably leaves alone and several servers choke on.
A whole URL — leaves the structural characters intact so https://, the path separators and the query delimiters keep working, and only encodes spaces and genuinely illegal characters. Use it when you have a complete URL that contains a space or an accented character.
Form data — the same as the first, except a space becomes + instead of %20. This is the application/x-www-form-urlencoded convention, and it is what an HTML form submits. Using it in a path segment produces a literal plus sign in your data.
Why encoding a whole URL as a component breaks it
https://example.com/a?b=c and run it through component mode you get https%3A%2F%2Fexample.com%2Fa%3Fb%3Dc. That is correct — and it is what you want, but only when the URL is itself a parameter value, as in a redirect target. If you paste it into a browser bar it is not a URL at all any more. Match the mode to where the string is going.What is never encoded
A–Z a–z 0–9 - . _ ~ — passes through untouched in every mode, because the specification guarantees those are safe everywhere. Anything else is percent-encoded as its UTF-8 bytes, which is why a single accented character becomes two escapes and an emoji becomes four.Other names for this
Also searched as “percent encode”, “urlencode online”, “encode url”.
Questions
- Should a space be %20 or +?
- %20 anywhere in a URL. + only in form-encoded body data or a query string built by an HTML form. When in doubt, %20 is valid in both places.
- Why did my accented character become several escapes?
- Percent-encoding operates on bytes, and one non-ASCII character is two to four UTF-8 bytes. Each byte becomes one escape.
- Does my text leave the browser?
- No. Everything runs as JavaScript in this tab — there is no server involved and no request is made. Open the Network panel and watch, or turn your Wi-Fi off and keep using the tool.