URL Encoder, Decoder & Parser

Percent-encoding in plain terms

URLs can only contain a small set of ASCII characters. Everything else, including spaces, accented letters, emoji and characters that have structural meaning like & or #, has to be written as a percent sign followed by the hex value of each UTF-8 byte. A space becomes %20, é becomes %C3%A9, and a literal & inside a value becomes %26 so it is not mistaken for the start of the next parameter.

encodeURIComponent vs encodeURI

JavaScript gives you two functions and choosing the wrong one is the most common URL bug in front-end code.

• encodeURIComponent is for a single piece: one query value, one path segment. It escapes / ? & = # : so they cannot break the URL's structure. Use it every time you insert user input or data into a URL.
• encodeURI is for a complete URL that is already structured correctly but may contain spaces or non-ASCII characters. It leaves the reserved characters alone, so it will happily let an & inside a value split your parameters.

const q = 'salt & pepper';
'/search?q=' + encodeURI(q);           // /search?q=salt%20&%20pepper  (broken)
'/search?q=' + encodeURIComponent(q);  // /search?q=salt%20%26%20pepper (correct)

// Even better: let the platform do it
const url = new URL('/search', location.origin);
url.searchParams.set('q', q);          // /search?q=salt+%26+pepper

Two subtleties: encodeURIComponent does not escape ! ' ( ) *, which RFC 3986 reserves, so some strict APIs (OAuth 1.0 signatures, AWS SigV4) need the extra option above. And URLSearchParams writes spaces as +, which is correct for query strings but wrong in a path.

Editing query strings without breaking them

The parser uses the browser's own URL class, the same one your production code should use, so what you see here is exactly how a browser reads the address. Change a value in the table and the URL is rebuilt with proper encoding. Repeated keys such as ?tag=a&tag=b are kept as separate rows, which matters for filters and array style parameters.

UTM links that stay clean in analytics

Analytics tools treat Email, email and e-mail as three different mediums, which splits your reports. Pick a convention and never deviate: lowercase, hyphens instead of spaces, and a short shared list of mediums (email, cpc, social, paid_social, referral, qr). The cleanup option enforces that for you. Never put UTM parameters on internal links, because they start a new session and overwrite the real source of the visit.

Frequently asked questions