URL encoder / decoder
Encode and decode URL-percent-escapes for whole URLs or just query-string values. Two encoding modes for the two slightly different rules.
What URL encoding is
URLs can only contain a limited set of characters safely. Letters, digits, and a handful of punctuation marks (-, _, ., ~) are safe as-is. Everything else — spaces, accented characters, slashes inside a query value, plus signs, equals signs — must be replaced with a percent sign followed by two hex digits representing the UTF-8 byte. That replacement is called percent-encoding or URL-encoding. RFC 3986 is the governing spec.
Component vs URI
JavaScript provides two encoders that follow slightly different rules:
- encodeURIComponent encodes everything except
A-Z a-z 0-9 - _ . ~ ! * ' ( ). Use this for individual values you're inserting into a URL — query-string values, path segments, fragment text. - encodeURI additionally leaves the URL reserved characters alone (
:/?#[]@!$&'()*+,;=). Use this for whole URLs you don't want to break.
If in doubt, use component — it's safer to over-encode than under-encode. A string encoded with encodeURIComponent must be decoded with decodeURIComponent, and likewise for the URI variant.
Common cases
| Raw value | Component-encoded |
|---|---|
| hello world | hello%20world |
| a&b=c | a%26b%3Dc |
| https://example.com/?q=test | https%3A%2F%2Fexample.com%2F%3Fq%3Dtest |
| München | M%C3%BCnchen |
| café | caf%C3%A9 |
The plus-sign trap
In URL query strings, a literal space can be encoded as either %20 or +. Both are accepted by most servers, but + is only valid inside the query-string portion of a URL. encodeURIComponent always uses %20, which is safer.
Privacy
All encoding and decoding happens in your browser.