URL Encoding Explained: Percent-Encoding for Query Strings
Written by Muhammad Ali · Senior Full Stack Software Engineer
Personal website: codedbymali.comURL encoding explained: which characters must be percent-encoded, encodeURIComponent vs encodeURI, and how to debug broken redirects and OAuth callbacks.
URLs reserve characters like `?`, `&`, `#`, and spaces for structure. Percent-encoding replaces unsafe bytes with `%` plus two hex digits (for example space → `%20`) so data can sit inside a URL without breaking parsing.
In JavaScript, `encodeURIComponent` is usually correct for individual query values and path segments. `encodeURI` leaves more structural characters alone and is meant for full URLs you already trust. Mixing them up is a common source of double-encoding bugs.
Decode when reading logs or redirects so you can see the real parameter values. If decoding fails, look for a lone `%` or incomplete hex — that usually means truncation or a bad copy-paste.
OAuth callbacks, analytics links, and webhook signing often fail because one side encoded and the other expected raw text. Reproduce the exact string with a local encoder before blaming the IdP.
EverydayDevTools URL Encoder / Decoder mirrors typical component encoding so you can fix links without uploading production URLs to a random online form.
Open URL Encoder