URL Encoder JavaScript: encodeURIComponent vs encodeURI

encodeURIComponent — for values

This is the one you want for a single query parameter value, a path segment, or anything going inside a URL as data. It encodes reserved characters including & = ? # / : @ +.

It deliberately leaves A-Z a-z 0-9 - _ . ! ~ * ' ( ) alone. If you are signing a request for an API that expects RFC 3986 strictness, encode the last five yourself:

const strict = (s) =>
  encodeURIComponent(s).replace(
    /[!'()*]/g,
    (c) => '%' + c.charCodeAt(0).toString(16).toUpperCase()
  );

encodeURI — for whole URLs only

encodeURI assumes it is given a complete URL and preserves the characters that give a URL structure: : / ? # & = @ + $ , ;. It only escapes genuinely unsafe characters such as spaces and non-ASCII.

That makes it useless for encoding a value:

encodeURI('a&b');          // 'a&b'   -> splits into two parameters
encodeURIComponent('a&b'); // 'a%26b' -> stays one value

Using encodeURI where encodeURIComponent belongs is the single most common URL bug in JavaScript.

escape — never use it

escape() is deprecated and was never UTF-8 aware. It encodes non-ASCII as %uXXXX, which is not valid percent-encoding and no server decodes correctly. It also leaves + and / unescaped.

If you find it in a codebase, replacing it with encodeURIComponent is almost always the correct fix.

URLSearchParams and URL — the modern way

Instead of concatenating and encoding by hand, build the query with URLSearchParams — every value is encoded for you:

const p = new URLSearchParams({ q: 'coffee & tea', page: '2' });
p.toString(); // 'q=coffee+%26+tea&page=2'

Note it encodes spaces as +, following form rules. If you need %20, use new URL() and set url.searchParams, or replace /\+/g with %20 on the final string.

For decoding, decodeURIComponent reverses encodeURIComponent. It throws a URIError on malformed input such as a lone % — wrap it in try/catch when the input comes from users.