When should I use encodeURIComponent vs encodeURI?

Use encodeURIComponent for individual values like query parameters; it escapes &, =, ?, and /. Use encodeURI for a complete URL where those delimiters must stay intact.

Why does a space sometimes become + and sometimes %20?

Path and standard percent-encoding use %20. The application/x-www-form-urlencoded format (HTML form bodies) uses + for spaces. The decoder must match the context.

What characters do not need URL encoding?

The unreserved set: letters, digits, and - _ . ~. Everything else is safer to encode when used as data.

What is double-encoding?

Encoding a string that is already encoded, turning % into %25 (so %20 becomes %2520). Decode exactly once per encoding layer to avoid corrupted values.

URL encoding explained: percent-encoding and when you need it

5 min readUpdated May 24, 2026

URLs can only safely contain a limited set of characters. URL encoding (a.k.a. percent-encoding) escapes everything else so values survive the trip intact. Get the rules wrong and you get broken links or silently dropped data.

How percent-encoding works

Any character that is not allowed in a URL is replaced by % followed by its byte value in hex. A space becomes %20, an ampersand becomes %26, and so on. Multi-byte UTF-8 characters become several %XX sequences.

Encode or decode any value in the URL Encoder.

Reserved vs unreserved characters

Unreserved characters (A-Z a-z 0-9 - _ . ~) never need encoding. Reserved characters (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) have special meaning in a URL and must be encoded when used as *data* rather than as delimiters.

encodeURI vs encodeURIComponent

This trips people constantly. encodeURI is for encoding a whole URL — it leaves :/?#&= intact. encodeURIComponent is for a single value (a query parameter) — it encodes those delimiters too.

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

encodeURIComponent('a b&r=2')
// a%20b%26r%3D2  (encodes everything)

Building a query string? Encode each value with encodeURIComponent, not the whole URL.

Common gotchas

Space encodes to %20 in paths, but legacy form data uses +. Decoders must know which context they are in.
Double-encoding: encoding an already-encoded string turns %20 into %2520. Decode once per layer.
The # fragment is never sent to the server — do not rely on it for server-side data.

Frequently asked questions

When should I use encodeURIComponent vs encodeURI?: Use encodeURIComponent for individual values like query parameters; it escapes &, =, ?, and /. Use encodeURI for a complete URL where those delimiters must stay intact.
Why does a space sometimes become + and sometimes %20?: Path and standard percent-encoding use %20. The application/x-www-form-urlencoded format (HTML form bodies) uses + for spaces. The decoder must match the context.
What characters do not need URL encoding?: The unreserved set: letters, digits, and - _ . ~. Everything else is safer to encode when used as data.
What is double-encoding?: Encoding a string that is already encoded, turning % into %25 (so %20 becomes %2520). Decode exactly once per encoding layer to avoid corrupted values.

Try it yourself

Put this guide into practice — these tools run free in your browser.

URL Encode / Decode Base64 Encode / Decode URL Slug Generator