URL Encoding Guide
URL encoding (percent-encoding) converts special characters into a format that can be transmitted over the Internet. Learn when and how to encode URLs correctly.
🤔 Why Is URL Encoding Needed?
URLs can only contain a limited set of characters (ASCII letters, digits, and a few symbols).
Special characters like spaces, &, =, and international characters must be encoded to:
- Prevent breaking URL structure
- Safely transmit data in query parameters
- Support Unicode characters (non-Latin scripts)
URL Structure
Reserved Characters
These characters have special meaning in URLs. Encode them when used as data:
| Char | Purpose |
|---|---|
| : | Scheme separator |
| / | Path separator |
| ? | Query string start |
| # | Fragment identifier |
| & | Parameter separator |
| = | Key-value separator |
| @ | User info separator |
| + | Space (form data) or literal |
Common Character Encodings
| Character | Name | %20 Style |
|---|---|---|
| Space | %20 | |
| ! | Exclamation | %21 |
| " | Quote | %22 |
| ' | Apostrophe | %27 |
| ( | Open paren | %28 |
| ) | Close paren | %29 |
| < | Less than | %3C |
| > | Greater than | %3E |
| \ | Backslash | %5C |
| | | Pipe | %7C |
JavaScript Encoding Methods
encodeURIComponent()RecommendedEncodes all special characters EXCEPT: A-Z a-z 0-9 - _ . ! ~ * ' ( )
Use case: Query parameters, path segments
encodeURIComponent("hello world") → "hello%20world"encodeURI()Encodes spaces and some chars, but NOT: : / ? # & = @
Use case: Full URLs (preserves structure)
encodeURI("https://ex.com/a b") → "https://ex.com/a%20b"URLSearchParamsRecommendedModern API for building query strings. Handles encoding automatically.
Use case: Building query strings in modern apps
new URLSearchParams({q: "hello world"}).toString() → "q=hello+world"escape() / unescape()DeprecatedDEPRECATED. Does not encode +@/. Does not handle Unicode properly.
Use case: NEVER USE
Don't use these functionsCommon Mistakes
Double encoding
https://example.com/path%2520with%2520spaceshttps://example.com/path%20with%20spaces💡 Don't encode already-encoded URLs
Not encoding query values
?search=hello world&category=books?search=hello%20world&category=books💡 Always encode user input in query parameters
Encoding entire URL
https%3A%2F%2Fexample.comhttps://example.com💡 Only encode values, not URL structure
Confusing + and %20
Using + in path segmentsUse %20 for spaces in paths, + only in query strings💡 Servers interpret + as space only in query strings
Space Encoding: %20 vs +
RFC 3986 standard. Use in path segments and general URL encoding.
/path%20with%20spacesHTML form encoding (application/x-www-form-urlencoded). Query strings only.
?search=hello+worldExternal Resources
Encode/Decode URLs Instantly!
Use our free URL encoder/decoder tool for quick conversions.
🔗Open URL Encoder