URL Encoder/Decoder
Encode special characters in URLs or decode percent-encoded URLs. Parse URL components.
You May Also Like
What is URL Encoding?
URL encoding (also called percent-encoding) converts special characters into a format that can be safely transmitted in URLs.
URLs can only contain certain characters. Special characters like spaces, &, ?, and non-ASCII characters must be encoded.
Example: Hello World! → Hello%20World%21
Why Encode URLs?
URLs have reserved characters with special meanings:
?starts the query string&separates parameters=assigns values/separates path segments
If your data contains these characters, they must be encoded to avoid breaking the URL structure.
Before encoding:
https://example.com/search?q=coffee & tea
After encoding:
https://example.com/search?q=coffee%20%26%20tea
encodeURI vs encodeURIComponent
JavaScript provides two encoding functions with different behaviors:
| Function | Encodes | Use Case |
|---|---|---|
encodeURI() | Spaces, non-ASCII | Full URLs (preserves structure) |
encodeURIComponent() | All special chars | Query parameter values |
Rule of thumb: Use encodeURIComponent() for query parameter values, encodeURI() for full URLs.
// ❌ Wrong - breaks the URL
encodeURIComponent("https://example.com/path?q=test")
// Result: https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dtest
// ✅ Correct - preserves structure
encodeURI("https://example.com/path?q=hello world")
// Result: https://example.com/path?q=hello%20world
Common Encoded Characters
| Character | Encoded | Name |
|---|---|---|
| (space) | %20 or + | Space |
! | %21 | Exclamation |
# | %23 | Hash |
$ | %24 | Dollar |
& | %26 | Ampersand |
+ | %2B | Plus |
= | %3D | Equals |
? | %3F | Question |
@ | %40 | At |
Spaces can be encoded as %20 or +. Modern standards prefer %20, but + is common in query strings.
URL Encoding Tips
1. Don't Double-Encode If data is already encoded, decoding then re-encoding can cause issues.
2. Encode User Input Always encode user-provided data before putting it in URLs.
3. Test Special Characters
Test with characters like &, =, ?, #, and Unicode characters.
4. Use URL Objects
Modern JavaScript's URL and URLSearchParams handle encoding automatically.