The Complete Guide to URL Encoding
Percent-encoding from first principles — the reserved alphabet, the two encoding functions and the bugs to avoid.
Daniel Osei
Software Engineer & Developer Tools
URL encoding exists for one reason: URLs need a small, unambiguous alphabet, and data wants to use everything else. Percent-encoding is the bridge between the two.
The URL alphabet
A safe URL character set includes A–Z, a–z, 0–9, and a small set of symbols (- _ . ~ and the structural characters : / ? # & =). Everything else — spaces, quotes, non-ASCII, and reserved symbols used as data — must be percent-encoded.
How percent-encoding works
Each character is written as % followed by two hex digits representing its UTF-8 byte value. A space is byte 0x20 → %20. The ampersand is 0x26 → %26. The encoding is mechanical and always reversible.
q=hello world&x=5 → q=hello%20world%26x%3D5Two functions, two jobs
| Function | Encodes | Leaves alone | Use for |
|---|---|---|---|
| encodeURI | spaces, quotes, non-ASCII | :/?#&= | Whole URLs |
| encodeURIComponent | nearly everything | A–Z a–z 0–9 - _ . ! ~ * ' ( ) | Query values, path segments |
The classic bug
Encoding a whole URL with encodeURIComponent turns :// and & into %3A%2F%2F and %26, corrupting the link. Encoding a query value with encodeURI leaves & and = intact, corrupting the query. Match the function to the job.
Practical rules
- Encode every query value individually, always.
- Leave the URL structure unencoded.
- Expect and handle both "+" (form encoding) and "%20" (standard) for spaces.
- For URLs inside URLs (redirects, deep links), encode the inner URL fully.
The URL Encoder/Decoder shows both modes side by side — the fastest way to internalise the difference.
Should I encode my own links?
Browsers auto-encode in the address bar, but stored, shared and embedded URLs should be explicitly encoded so every system reads them the same way.
Tools for this task
Encode and decode URLs, query strings and components.
Turn any title into a clean, URL-ready slug.
JSON Formatter
PopularPretty-print, validate and minify JSON — securely in your browser.
Keep reading
URL Encoding, Explained: What %20 Actually Is
The "%" codes in URLs are not corruption — they are a precise language. Here is how percent-encoding works and when it matters.
The Complete Guide to JSON Formatting and Validation
Pretty-print, validate and debug JSON with confidence — from the syntax rules to the most common production errors.
