Skip to main content
· 6 min read

URL Encoding Explained: Percent-Encoding for Query Strings

Written by Muhammad Ali · Senior Full Stack Software Engineer

Personal website: codedbymali.com

URL 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