What is URL Encoding?
URL encoding replaces each unsafe character with % and the two hex digits of its UTF-8 bytes: a space becomes %20, & becomes %26 and é becomes %C3%A9. Encode mode here works like JavaScript's encodeURIComponent, Decode reverses it (reading + as a space), and Parse splits a full URL into its parts. It all runs in your browser.
URL encoding (percent-encoding) converts characters that aren't safe in URLs into a percent sign followed by two hexadecimal digits. URLs can only safely contain a limited set of ASCII characters: anything else must be encoded.
For example, a space becomes %20, an ampersand becomes %26, and the question mark becomes %3F.
Three Modes Explained
URL Encode
URL Decode
Query String Parser
%20 vs + for Spaces
encodeURIComponent vs encodeURI Side by Side
Three encoders, three different results. Form encoding is what HTML forms and URLSearchParams produce for query strings.
| Input | encodeURIComponent | encodeURI | Form encoding |
|---|---|---|---|
| hello world | hello%20world | hello%20world | hello+world |
| a+b=c | a%2Bb%3Dc | a+b=c | a%2Bb%3Dc |
| C++ & C# | C%2B%2B%20%26%20C%23 | C++%20&%20C# | C%2B%2B+%26+C%23 |
| 50% off | 50%25%20off | 50%25%20off | 50%25+off |
| café? | caf%C3%A9%3F | caf%C3%A9? | caf%C3%A9%3F |
| /path/to file.pdf | %2Fpath%2Fto%20file.pdf | /path/to%20file.pdf | %2Fpath%2Fto+file.pdf |
| !'()* | !'()* | !'()* | %21%27%28%29* |
The rule of thumb: use encodeURIComponent for a single value you are putting into a query string or path segment, and encodeURI only to clean up a complete URL whose structure (/ ? & = #) must survive. The last row shows that encodeURIComponent leaves ! ' ( ) and * alone; a few strict APIs, such as OAuth 1.0 signatures, need them as %21 %27 %28 %29 %2A.
Common Characters and Their Percent Codes
| Character | Encoded | Why it needs encoding in a value |
|---|---|---|
| space | %20 (or + in a query string) | Not allowed anywhere in a URL |
| & | %26 | Separates query parameters |
| = | %3D | Separates a key from its value |
| ? | %3F | Starts the query string |
| # | %23 | Starts the fragment; the browser never sends what follows |
| + | %2B | Read as a space in form-encoded queries |
| / | %2F | Separates path segments |
| % | %25 | Starts every escape, so a literal % must be escaped too |
| é | %C3%A9 | Non-ASCII: two UTF-8 bytes |
| € | %E2%82%AC | Non-ASCII: three UTF-8 bytes |
| 😀 (emoji) | %F0%9F%98%80 | Non-ASCII: four UTF-8 bytes |
Common URL Encoding Mistakes
Encoding twice
Encoding an already encoded string escapes the % signs: %20 becomes %2520. If you see %25 followed by two hex digits in a URL, something encoded it twice. Decode once, then encode once at the point where the value enters the URL.
Leaving + in a value
A search for "a+b" sent as ?q=a+b arrives on the server as "a b", because form decoding reads + as a space. Encode the value and it travels as a%2Bb.
Using encodeURIComponent on a whole URL
It turns https:// into https%3A%2F%2F and the link stops working. Encode only the parts you insert, or use encodeURI for the whole address.
A stray percent sign
"100%" on its own is not valid encoding, and neither is a UTF-8 sequence cut in half such as %E4%BD. Both make decodeURIComponent throw "URI malformed", and the Decode tab shows an error. Write a literal percent sign as %25.
Encoding binary data for a URL is a different job; for that, URL-safe Base64 is usually shorter than percent-encoding every byte.
Frequently Asked Questions
encodeURI() encodes a complete URL, it leaves characters that have structural meaning in URLs (/, :, ?, #, &, =) unencoded. encodeURIComponent() encodes a URL segment (like a parameter value): it encodes nearly everything including /, ?, &, and =. Use encodeURIComponent() when encoding individual query parameter values, and encodeURI() when encoding an entire URL. This tool uses encodeURIComponent() for the Encode mode.urllib.parse module: from urllib.parse import quote, urlencode. To encode a string: quote('hello world') returns 'hello%20world'. quote() keeps slashes by default (safe='/'); use quote(string, safe='') to encode them as %2F too. To encode query parameters: urlencode({'q': 'hello world', 'page': 1}) returns 'q=hello+world&page=1'. For decoding: unquote('hello%20world') returns 'hello world'.new URLSearchParams(window.location.search). To get a specific parameter: params.get('q'). To iterate all parameters: for(const [key, val] of params). For a full URL: const url = new URL('https://example.com?q=test'); url.searchParams.get('q'). In older code you may see manual splitting on & and =, but URLSearchParams handles encoding/decoding automatically and is the recommended approach.encodeURI() (not encodeURIComponent) to encode an entire URL. It leaves the structural characters, scheme (https://), path slashes, ?, &, and =, intact, while encoding any spaces or special characters within values. If you need to embed one URL as a parameter inside another URL, encode the inner URL with encodeURIComponent() so its ? and & characters don't interfere with the outer URL's structure.encodeURIComponent() encodes everything except letters, digits and - _ . ! ~ * ' ( ), which is slightly less than RFC 3986 reserves (it treats ! ' ( ) * as reserved). Older tools may encode more characters. The case of hex digits (uppercase %2F vs lowercase %2f) varies: both are valid. Using + vs %20 for spaces depends on the encoding standard (form encoding vs standard URI encoding). This tool uses JavaScript's encodeURIComponent() for maximum compatibility with modern APIs and browsers.