URL Encoding, Quick Facts
- •URL (percent) encoding replaces unsafe characters with
%followed by their hex byte value, e.g. a space becomes%20. - •Reserved characters like
: / ? # & =have special meaning in a URL's structure and should only be encoded when they appear inside a value, not the URL's own structure. - •
encodeURIComponent()escapes everything, use it for a single query value.encodeURI()preserves URL structure characters, use it for a whole URL. - •A
+in a query string traditionally means a space inapplication/x-www-form-urlencodeddata, but not in strict percent-encoding.
The Real Problem This Solves
Spaces, ampersands, and non-English characters silently break URLs and query strings, a search for "home loan & tax" turns into a truncated or misrouted request the moment it hits a browser or API.
The trap is picking the wrong encoding mode: encoding an entire URL with the "component" function mangles its structure by escaping the very / and ? characters that make it a URL.
How Percent-Encoding Works
Each unsafe character is converted to its UTF-8 byte representation, and each byte is written as % followed by two hex digits. Letters, digits, and a small set of "unreserved" characters (- _ . ~) are left untouched because they're always safe in a URL.
Example: the query home loan & tax encodes to home%20loan%20%26%20tax as a component. Encoded as a whole URL instead, structural characters like & that separate query parameters would be preserved, that distinction is exactly what the "Whole URL mode" toggle controls.
| Character | Percent-Encoded |
|---|---|
| Space | %20 |
| & | %26 |
| ? | %3F |
| # | %23 |
| / | %2F |
| + | %2B |
Frequently Asked Questions
When should I use "Whole URL mode"?
When you're encoding a complete, valid URL and want to keep its structural characters (: / ? # & =) intact while still escaping unsafe ones like spaces. Use plain "Encode" (component mode) when you're encoding just one value, like a single query parameter, that will be inserted into a URL.
Why does a + sometimes mean a space?
That convention comes from the older application/x-www-form-urlencoded format used by HTML forms, not from the URL spec itself. Percent-encoding proper always uses %20 for a space; treat + as a space only when you know the data came from a form submission.
Is URL encoding the same as Base64?
No. URL encoding escapes specific unsafe characters while leaving the rest of the text readable. Base64 re-encodes the entire input into a completely different character set. A Base64 string is itself often URL-encoded afterwards if it contains + or / characters.
Why did decoding fail on my input?
The string contains a % that isn't followed by two valid hex digits, an incomplete or corrupted percent-encoded sequence.
Does encoding work with non-English text?
Yes. Text is first converted to UTF-8 bytes, then each byte is percent-encoded, so any language or emoji encodes and decodes correctly.
Need to validate the encoded format in code?
Test a percent-encoding or URL pattern against real strings using the ready-made URL preset in our Regex Tester.
Open Regex Tester →