How to URL-encode a string
Percent-encoding replaces every character that is not safe in a URL with % followed by the hexadecimal value of each of its UTF-8 bytes. Component mode, which uses encodeURIComponent(), is the right choice for a single query value or path segment.
Worked example
| Character | UTF-8 bytes | Component |
|---|---|---|
| ␠ | %20 | %20 |
| & | %26 | %26 |
| = | %3D | %3D |
| / | %2F | %2F |
| ? | %3F | %3F |
| é | %C3 %A9 | %C3%A9 |
| 😀 | %F0 %9F %98 %80 | %F0%9F%98%80 |
Component mode encodes the whole phrase into one safe value.
- Input
- rock & roll/size=XL? café 😀
- Result ·
encodeURIComponent() - rock%20%26%20roll%2Fsize%3DXL%3F%20caf%C3%A9%20%F0%9F%98%80
Full URL mode leaves & = / ? unchanged, so use it only on a complete URL.
- Input
- rock & roll/size=XL? café 😀
- Result ·
encodeURI() - rock%20&%20roll/size=XL?%20caf%C3%A9%20%F0%9F%98%80
How the tool handles it
- Letters A–Z and a–z, digits 0–9 and - _ . ! ~ * ' ( ) are never changed.
- Every other character is converted to UTF-8 bytes, and each byte is written as % plus two uppercase hexadecimal digits: é is two bytes, most emoji are four.
- Component mode also encodes the reserved characters : / ? # [ ] @ & = + $ , ; so they cannot change the structure of the URL.