What is URL Encoding?
URL encoding, also known as percent encoding, is a mechanism defined in RFC 3986 for encoding information in a Uniform Resource Identifier (URI). URLs can only contain a limited set of ASCII characters, so any characters outside this set must be converted to a special format.
When a character needs encoding, it is replaced with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII value. For example, a space (ASCII 32) becomes %20, and an ampersand (ASCII 38) becomes %26.
How Does URL Encoding Work?
The encoding process follows these steps:
- Identify unsafe characters: Check if each character is in the unreserved set (A-Z, a-z, 0-9, - _ . ~).
- Convert to UTF-8: For non-ASCII characters, convert them to their UTF-8 byte sequence.
- Percent-encode each byte: Replace each byte with % followed by its two-digit hexadecimal value.
URL Encoding Reference Table
Space → %20 (or + in form data)
! → %21 # → %23 $ → %24 % → %25
& → %26 ' → %27 ( → %28 ) → %29
* → %2A + → %2B , → %2C / → %2F
: → %3A ; → %3B = → %3D ? → %3F
@ → %40 [ → %5B ] → %5D
encodeURI vs encodeURIComponent
JavaScript provides two functions for URL encoding with different behaviors:
- encodeURIComponent: Encodes all characters except A-Z a-z 0-9 - _ . ! ~ * ' ( ). Use this for encoding query parameter values.
- encodeURI: Preserves URL structure characters like : / ? # & =. Use this for encoding a complete URL while keeping it functional.
Input: "hello world & goodbye"
encodeURIComponent: hello%20world%20%26%20goodbye
encodeURI: hello%20world%20&%20goodbye (& preserved)
Benefits of URL Encoding
- Universal compatibility: Ensures URLs work correctly across all browsers, servers, and systems.
- Data integrity: Prevents special characters from being misinterpreted as URL delimiters.
- Unicode support: Allows international characters (Chinese, Arabic, emojis) to be included in URLs.
- Security: Helps prevent certain injection attacks by properly encoding user input in URLs.
- API compatibility: Required for properly formatting REST API requests with query parameters.
When to Use URL Encoding
- Query parameters: When passing user input or special characters in URL query strings.
- Form submissions: GET forms automatically encode data; this tool helps verify the encoding.
- API development: Building URLs programmatically with dynamic values.
- Debugging: Decoding URLs to inspect the actual parameter values being transmitted.
- File names in URLs: Encoding spaces and special characters in file paths.
Frequently Asked Questions
Why do I see %20 instead of spaces in URLs?
The space character (ASCII code 32, hexadecimal 20) is not allowed in URLs. When a URL contains a space, it must be encoded as %20. Some systems also use + to represent spaces in query strings (application/x-www-form-urlencoded format), though %20 is the standard RFC 3986 encoding.
What is the difference between %20 and + for spaces?
Both represent spaces but in different contexts. %20 is the standard percent-encoding for spaces in any part of a URL. The + sign represents spaces only in the query string portion when using application/x-www-form-urlencoded format (common in HTML form submissions). When in doubt, use %20 as it works everywhere.
Do I need to encode the entire URL?
No. You should only encode individual parameter values, not structural characters like :// or /. Use encodeURIComponent for parameter values and encodeURI for complete URLs. Encoding structural characters would break the URL.
How do I encode Unicode characters like emojis?
Unicode characters are first converted to UTF-8 bytes, then each byte is percent-encoded. For example, the thumbs-up emoji is encoded as %F0%9F%91%8D (4 UTF-8 bytes). This tool handles Unicode automatically.
Is URL encoding reversible?
Yes, URL encoding is completely reversible. Any properly encoded string can be decoded back to its original form. The decoding process converts %XX sequences back to their corresponding characters.
What happens if I double-encode a URL?
Double encoding occurs when you encode an already-encoded string, turning %20 into %2520. This is a common bug that causes URLs to break. Always encode raw data, not already-encoded strings.