📋 Contents
Why URLs Need Encoding
URLs can only contain a limited set of characters safely. The URL spec (RFC 3986) defines two character groups:
Unreserved characters — always safe, never need encoding:
A-Z a-z 0-9 - _ . ~
Reserved characters — have special meaning in URLs and must be encoded when used as data (not as URL syntax):
: / ? # [ ] @ ! $ & ' ( ) * + , ; =
Everything else — spaces, Unicode characters, binary data — MUST be percent-encoded. That's where %20 comes from: space is ASCII character 32 decimal = 0x20 in hexadecimal. Percent + hex value = %20.
The problem URL encoding solves: what if your search query is "AT&T"? The & character has special meaning in URLs (it separates query parameters). So ?q=AT&T would be parsed as parameter "q" with value "AT" and a second parameter "T" with no value. Encoding & as %26 fixes this: ?q=AT%26T.
Which Characters Get Encoded (And to What)
| Character | Encoded | Why |
|---|---|---|
| Space | %20 (or + in form data) | Spaces aren't valid in URLs |
& | %26 | Separates query parameters |
# | %23 | Fragment identifier separator |
? | %3F | Starts query string |
= | %3D | Separates key from value in query params |
/ | %2F | Path separator (encode when part of a path segment value) |
: | %3A | Scheme/port separator |
+ | %2B | Represents space in form-encoded data. Encode literal + as %2B |
@ | %40 | Userinfo separator in authority |
| Unicode (e.g., é) | %C3%A9 | UTF-8 bytes, then percent-encode each byte |
encodeURI vs encodeURIComponent — The Bug Everyone Hits
JavaScript has two URL encoding functions. They encode different character sets. Using the wrong one is one of the most common web dev bugs:
// ❌ WRONG: encodeURI for query parameter values const query = "AT&T"; const url = "https://api.example.com/search?q=" + encodeURI(query); // → https://api.example.com/search?q=AT&T // The & is NOT encoded. Broken. // ✅ RIGHT: encodeURIComponent for query parameter values const url = "https://api.example.com/search?q=" + encodeURIComponent(query); // → https://api.example.com/search?q=AT%26T // The & is encoded. Correct.
The rule:
encodeURIComponent()— Encodes everything exceptA-Z a-z 0-9 - _ . ! ~ * ' ( ). Use for individual query parameter VALUES.encodeURI()— Encodes fewer characters (keeps: / ? # [ ] @intact). Use for ENTIRE URLs that aren't fully encoded yet. Rarely what you want.
encodeURIComponent(). If you're building a query string, encode each key and value with encodeURIComponent(), join with = and &.Double-Encoding: When % Becomes %25
Double-encoding happens when already-encoded data gets encoded again:
Original: AT&T Encoded: AT%26T Double-enc: AT%2526T (the % in %26 was encoded as %25)
This is a real debugging nightmare because the URL looks valid — it just doesn't work. The server decodes %2526 to %26 (literal string), not to &. Common causes:
- Encoding a URL that's already partially encoded
- Framework automatically encoding query params when you already did it manually
- Copy-pasting encoded URLs between systems that each apply encoding
Detection tip: if you see %25 in a URL where it shouldn't be, you're double-encoded. %25 is the percent sign itself. Decode once and check if the result makes sense.
How to Encode/Decode URLs Instantly
Use the iluv.tools URL Encoder/Decoder. Paste any URL or text — it encodes and decodes instantly in your browser. No data ever sent to a server.
Also useful in the same category:
- Base64 Encoder — For binary-to-text encoding (different from URL encoding — don't confuse them).
- Hash Generator — Generate MD5, SHA-1, SHA-256 hashes of any input.