Text to Encode
encodeURIComponent()
Encodes all special characters including :, /, ?, #, &, =, +, etc.
encodeURI()
Preserves URI-safe characters like :, /, ?, #, &, =, +, @, etc.
Common URL Encoding Reference
| Character | Encoded | Description |
|---|---|---|
| %20 | Space |
! | %21 | Exclamation mark |
# | %23 | Hash |
$ | %24 | Dollar sign |
& | %26 | Ampersand |
' | %27 | Single quote |
( | %28 | Open parenthesis |
) | %29 | Close parenthesis |
* | %2A | Asterisk |
+ | %2B | Plus sign |
, | %2C | Comma |
/ | %2F | Forward slash |
: | %3A | Colon |
; | %3B | Semicolon |
= | %3D | Equals sign |
? | %3F | Question mark |
@ | %40 | At sign |
[ | %5B | Open bracket |
] | %5D | Close bracket |
{ | %7B | Open brace |
} | %7D | Close brace |
About URL Encoding
What is URL Encoding?
URL encoding (percent-encoding) replaces unsafe characters in URLs with a % followed by two hexadecimal digits representing the character's ASCII value. This ensures URLs are transmitted correctly across the internet.
encodeURI vs encodeURIComponent
encodeURI() encodes a full URI but preserves characters like :, /, ?, and # that have special meaning in URLs. encodeURIComponent() encodes everything, making it ideal for query parameter values.
When to Use Which
- Use
encodeURIComponent()for query parameter values - Use
encodeURI()for encoding a full URL string - Use
decodeURIComponent()to decode individual values - Use
decodeURI()to decode a complete URL
Example
Input: https://example.com/path?q=hello world&lang=enencodeURI: https://example.com/path?q=hello%20world&lang=enencodeURIComponent: https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dhello%20world%26lang%3Den