🔗 URL Encoder

Percent-encode text so it can travel safely inside a URL. The three encodings below cover every common case — pick the one that matches where the value is going. Everything runs in your browser.

Text to encode

Encoded live as you type.

💡 Which one do I need? Use component encoding for a single query-string value or path segment — it is the safe default. Use full URL encoding only when the text is already a complete URL. Use form encoding for application/x-www-form-urlencoded bodies, where spaces become +.

Three encodings, one input

The same text is run through encodeURIComponent, encodeURI, and component encoding with %20 swapped for +. The difference shows up on the reserved characters. Feed it city=Hà Nội and you get:

Component  city%3DH%C3%A0%20N%E1%BB%99i
Full URL   city=H%C3%A0%20N%E1%BB%99i
Form       city%3DH%C3%A0+N%E1%BB%99i

Only component encoding escapes the =, which is the whole point: inside a value, a reserved character must stop being a separator. Non-ASCII text is converted to UTF-8 first, so à is two bytes and ộ is three.

Choosing between them

Component for one query value or path segment. It escapes everything except A-Z a-z 0-9 - _ . ! ~ * ' ( ).
Full URL only for an address that is already assembled - it deliberately leaves : / ? # [ ] @ & = + $ , alone, so using it on a value lets that value break the URL apart.
Form for an x-www-form-urlencoded request body, where a space is historically +.

The form output is component encoding with the spaces swapped, so it still leaves ! ' ( ) ~ bare where URLSearchParams would write %21 %27 %28 %29 %7E. Both decode identically; only the bytes on the wire differ.

Frequently asked questions

When should I use encodeURI instead of encodeURIComponent?

Only when the string is a complete URL that just needs its spaces and accented characters cleaned up. For anything you are inserting into a URL - a search term, a filename, a redirect target - use component encoding.

Why is my ampersand still there after encoding?

You are looking at the full-URL row, which treats & as a separator and leaves it. The component row shows it as %26, which is what you want if the ampersand is part of a value rather than between two parameters.

Do I need to encode a slash in a query parameter?

Not for the URL to work - a slash after the question mark is legal. Encode it as %2F anyway if the value is a path that a router or proxy might otherwise try to interpret.