When and How to URL-Encode Query Parameters

Query parameters are the most common place URL encoding goes wrong. Here's how to get it right every time.

Why query params need encoding

A query string looks like ?key=value&key2=value2. The characters &, =, ?, and # are structural. If a value contains any of them, it must be encoded or it will corrupt the rest of the query.

Example — a search for tom & jerry:

❌ ?q=tom & jerry      → the & starts a new (broken) parameter
✅ ?q=tom%20%26%20jerry

The modern way: URLSearchParams

Don't hand-build query strings. URLSearchParams encodes values for you:

const params = new URLSearchParams({ q: 'tom & jerry', page: '2' });
params.toString();   // "q=tom+%26+jerry&page=2"

const url = `https://x.com/search?${params}`;

It handles escaping automatically, including spaces and reserved characters.

When you encode manually

If you build strings by hand, wrap each value in encodeURIComponent (not the whole URL):

const url = `https://x.com/search?q=${encodeURIComponent(term)}`;

See encodeURIComponent vs encodeURI for why the component version is correct here.

Decoding on the other side

Most frameworks decode query params automatically. If you decode manually, use decodeURIComponent, and remember that + may represent a space in form-encoded data.

Try it

Paste a parameter value into the URL encoder to see exactly how it should appear in your query string.