URL encoding explained

By Uxair Ijaz · 2026-10-22 · 2 min read

A URL can only contain a limited set of characters. Everything else (spaces, accents, emoji, and characters that have a special job in URLs) has to be written as percent-encoding: a % followed by the byte's value in hexadecimal.

hello world & more  →  hello%20world%20%26%20more
café                →  caf%C3%A9

Non-ASCII characters are first turned into UTF-8 bytes, which is why é becomes two escapes, %C3%A9.

Reserved characters

Some characters structure the URL itself, so they must be encoded when they appear inside a value:

Letters, digits and - _ . ~ never need encoding.

encodeURI vs encodeURIComponent

JavaScript has two functions, and picking the wrong one is the most common bug:

encodeURI('https://example.com/a b?q=1&x=2')
// "https://example.com/a%20b?q=1&x=2"  keeps : / ? & =

encodeURIComponent('fish & chips')
// "fish%20%26%20chips"  encodes & = ? / too

• Use encodeURIComponent for each value you put into a URL (a search term, a redirect target).
• Use encodeURI only for a whole URL that is already put together.
• Better still, let URL and URLSearchParams do it:

const url = new URL('https://example.com/search');
url.searchParams.set('q', 'fish & chips');
url.href; // https://example.com/search?q=fish+%26+chips

Spaces: %20 or +?

In the path, a space is always %20. In a query string sent by an HTML form (application/x-www-form-urlencoded), a space may be written as +. Both decode to a space in the query, but a + in a path is a literal plus sign.

Double encoding

If you encode a value that is already encoded, %20 becomes %2520 (% itself is encoded as %25). When a link shows %25 sequences, something encoded it twice.

Try it

The URL encoder encodes and decodes components or whole URLs and splits query strings into a readable table.