URL Encoding Explained: encodeURIComponent vs encodeURI

URLs can only contain a limited set of characters. Letters, digits and a few symbols are safe, but characters like spaces, &, ?, # and anything outside basic ASCII must be encoded before they go into a URL. Get it wrong and a search for “web & mobile” turns into a search for “web ”, or a link breaks halfway through.

How percent-encoding works

URL encoding (officially “percent-encoding”) replaces each unsafe character with a % followed by two hexadecimal digits for each of its bytes in UTF-8:

• Space → %20
• & → %26
• / → %2F
• é → %C3%A9 (two bytes in UTF-8)
• 👋 → %F0%9F%91%8B (four bytes)

Some characters are reserved because they have a job in the URL’s structure: ? starts the query string, & separates parameters, = separates names from values and # starts the fragment. If your data contains them, they must be encoded so they aren’t mistaken for structure.

encodeURIComponent vs encodeURI

JavaScript has two built-in functions, and choosing the wrong one is the most common mistake.

encodeURIComponent encodes everything except letters, digits and - _ . ! ~ * ' ( ). Use it for individual pieces, such as a single query value:

const q = 'web & mobile apps';
const url = `https://example.com/search?q=${encodeURIComponent(q)}`;
// https://example.com/search?q=web%20%26%20mobile%20apps

encodeURI leaves the structural characters (: / ? & = #) alone. Use it only to clean up a complete URL that might contain spaces or non-ASCII characters:

encodeURI('https://example.com/über uns?page=1');
// https://example.com/%C3%BCber%20uns?page=1

If you used encodeURI on the search value above, the & would stay unencoded and the server would see two parameters instead of one.

Spaces: %20 or +?

Both appear in the wild. In URL paths, a space must be %20. In HTML form submissions and many query strings (the application/x-www-form-urlencoded format), spaces are sent as +. That’s why decodeURIComponent alone won’t turn + back into spaces: you have to replace them first. Our URL Encoder / Decoder has a “Treat + as a space” option for exactly this.

Common URL encoding bugs

• Double encoding: encoding a value that was already encoded turns %20 into %2520. If you see %25 in your URLs, something is encoding twice.
• Not encoding at all: building URLs with string concatenation works fine in testing, then breaks when a real user types an & or #.
• Decoding malformed input: a stray % that isn’t followed by two hex digits makes decodeURIComponent throw an error. Wrap it in try/catch when the input comes from users.
• Encoding the whole URL as a component: encodeURIComponent("https://…") also encodes : and /, which is right when the URL is *itself* a parameter value (like a redirect target), but wrong for the URL you’re navigating to.

Encoding in other languages

• Python: urllib.parse.quote(value, safe="") for components, urllib.parse.urlencode(dict) for query strings
• PHP: rawurlencode() (spaces as %20) or urlencode() (spaces as +)
• Java: URLEncoder.encode(value, StandardCharsets.UTF_8) (uses + for spaces)

To quickly check what a value encodes to, or to read an encoded URL from a log file, paste it into the free URL Encoder / Decoder. It runs entirely in your browser.