Three encoding modes, and what each one actually leaves alone
This tool exposes three distinct encoding modes rather than one generic "URL encode" button, because the correct choice depends entirely on what you are encoding: a whole URL, a query parameter value, or form data destined for an HTML form post. Picking the wrong one either breaks the string it was meant to protect or leaves dangerous characters unescaped.
encodeURIComponent — the default — is the strictest of the three. It escapes every character except the unreserved set: uppercase and lowercase letters, digits, and the seven characters - _ . ! ~ * ' ( ). Everything else, including : / ? & = and space, is percent-encoded. That aggressiveness is exactly what you want for a value going inside a URL, such as a query parameter, because it guarantees the value can never be mistaken for URL structure.
encodeURI is the gentler mode, meant for encoding a complete URL rather than a fragment of one. It leaves the URL's own structural characters untouched — : / ? # [ ] @ ! $ & ' ( ) * + , ; = — so a full address like https://example.com/search?q=value keeps its scheme, slashes, and query separator intact. Only characters with no legitimate place in a URL, such as a literal space, get escaped.
Form URL encoding: the third, easily confused mode
The "Form URL Encoded" option produces application/x-www-form-urlencoded output — the format a browser generates when it submits an HTML form or builds a query string from form fields. It is built on encodeURIComponent's character set with one substitution: spaces become + instead of %20. Decoding reverses both directions: the tool first turns + back into a literal space, then runs decodeURIComponent on the result, so it correctly reads values written in either style.
The two space encodings are not interchangeable in every context. Standard URL paths and hand-written query values should use %20; only genuine form-post bodies and the query strings some frameworks build from form data use +. Pasting a +-encoded string into a browser address bar renders the plus sign literally, not as a space — that mismatch is one of the more common encoding bugs to chase down.
The real mistake this tool exists to prevent
The most common URL-encoding bug is encoding too much: running a whole URL through encodeURIComponent instead of encodeURI. Because encodeURIComponent escapes the colon and both slashes, https://example.com becomes https%3A%2F%2Fexample.com — a string that no longer works as a URL, only as a value that could be embedded inside one. The inverse mistake is just as common: encoding only a query parameter with encodeURI, which leaves & and = untouched, so a value containing either character silently truncates or corrupts the surrounding query string. Matching the mode to the payload — encodeURI for whole addresses, encodeURIComponent for the pieces inside them — is the entire discipline.
What happens outside the ASCII range
Non-ASCII text — accented letters, CJK characters, emoji — is encoded as its UTF-8 byte sequence, with every byte written as its own %XX triplet. A single emoji, which JavaScript represents as a UTF-16 surrogate pair, expands to four separate percent-encoded bytes once converted to UTF-8; a Japanese character expands to three. The visible string gets noticeably longer than the input — that is expected, not a sign of a bug, and decoding it exactly reverses the expansion.
One input, three outputs
Encoding https://example.com/search?q=hello world through all three modes shows the difference directly. encodeURIComponent produces https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world — every slash and colon escaped, unusable as an actual link but safe to embed as a value. encodeURI produces https://example.com/search?q=hello%20world — the address stays a working link, only the space inside the query value is escaped. The Form URL Encoded mode produces https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello+world — identical to the component mode except the space becomes a plus sign.
Parsing a URL into its components
When the input (or the decoded output) is a valid absolute URL, the tool parses it into protocol, hostname, port, pathname, query string, hash, and origin, and lists every query parameter as an individual key/value pair you can copy on its own. A color-coded bar above the breakdown marks each segment — protocol, host, path, query, hash — so a long URL's structure is visible at a glance instead of requiring you to count slashes and question marks by eye.