Why URLs Need Encoding
URLs can only contain a specific set of characters defined in RFC 3986. Characters outside this set — including spaces, Unicode characters, and most punctuation — must be percent-encoded: replaced with a % followed by two hexadecimal digits representing the character's byte value.
For example, a space becomes %20, @ becomes %40, and é (a UTF-8 character that takes two bytes: 0xC3 0xA9) becomes %C3%A9.
Safe vs. Reserved Characters
Unreserved characters (always safe, no encoding needed):
A–Z,a–z,0–9-,_,.,~
Reserved characters (have special meaning in URL syntax):
:,/,?,#,[,],@!,$,&,',(,),*,+,,,;,=
Reserved characters must be encoded when used as data (not as URL delimiters). For example, & in a query string value must become %26, or the parser will interpret it as a parameter separator.
encodeURI vs. encodeURIComponent
JavaScript provides two encoding functions with different scopes:
encodeURI(url) — encodes a complete URL. It does not encode characters that are part of URL syntax (:, /, ?, #, &, =, etc.) because those are structural. Use this when you have a complete URL and want to make it safe for transport.
encodeURIComponent(value) — encodes a single value that will be embedded in a URL. It encodes everything except unreserved characters, including &, =, ?, #, and /. Use this for query parameter names and values, path segments, or any user-provided data going into a URL.
// Correct: encode the value with encodeURIComponent
const q = 'hello world & more';
const url = `https://example.com/search?q=${encodeURIComponent(q)}`;
// Result: https://example.com/search?q=hello%20world%20%26%20more
// Wrong: encodeURI would not encode &
const url2 = `https://example.com/search?q=${encodeURI(q)}`;
// Result: https://example.com/search?q=hello%20world%20&%20more (broken!)
Common Gotchas
+ vs. %20 for spaces. In application/x-www-form-urlencoded (HTML form submissions), spaces are encoded as +. In URLs, spaces are encoded as %20. Most servers handle both, but mixing them causes confusion.
Double-encoding. If you encode an already-encoded URL, you get %2520 instead of %20. Always encode raw values, not already-encoded strings.
Encoding slashes in path segments. encodeURIComponent encodes / as %2F. This is correct if you have a value containing a slash that should be treated as data. But if you are assembling a URL path, encode each segment separately.
Try It
The URL Encoder on Syntaxly encodes and decodes URLs and URL components in the browser. Paste a raw value or an encoded string and get the transformation instantly.