URL Encoding Pitfalls Every Developer Should Avoid

URL encoding (percent-encoding) is deceptively simple, yet it remains one of the most common sources of bugs in web applications.

encodeURI vs encodeURIComponent

The most common mistake is using the wrong encoding function:

const url = 'https://example.com/search?q=hello world&lang=en';
// encodeURI — encodes a FULL URI, preserves :, /, ?, &, =
encodeURI(url);
// "https://example.com/search?q=hello%20world&lang=en"
// encodeURIComponent — encodes a URI COMPONENT
encodeURIComponent(url);
// "https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den"

Rule of thumb: Use encodeURIComponent for query parameter values. Use encodeURI only for complete URLs.

The Space Character Problem

Spaces can be encoded as either %20 or +, depending on context:

// URLSearchParams handles this correctly

const params = new URLSearchParams({ name: 'John Doe' });
params.toString(); // "name=John+Doe"

Double Encoding Trap

One of the most insidious bugs is encoding an already-encoded string:

const value = 'hello world';

const encoded = encodeURIComponent(value); // "hello%20world"
const doubleEncoded = encodeURIComponent(encoded); // "hello%2520world"

International Characters (IRIs)

const url = new URL('https://example.com');

url.pathname = '/search';
url.searchParams.set('q', 'test query');
url.toString();

Use our URL Encoder/Decoder tool to safely encode and decode URLs with full Unicode support.