Understanding URL Encoding: Why %20 Means Space
Have you ever copied a URL and seen a bunch of %20, %2F, and other strange characters? That is URL Encoding, also known as Percent-encoding.
Why do we need it?
URLs (Uniform Resource Locators) can only be sent over the Internet using the ASCII character set. However, URLs often contain characters outside the ASCII set (like Chinese characters, Emojis) or characters that have special meaning within URLs (like ?, &, /).
To solve this, we use URL Encoding. It converts unsafe characters into a format that can be transmitted over the Internet.
How it works
URL encoding replaces unsafe characters with a % followed by two hexadecimal digits.
For example:
- Space becomes
%20 - ! becomes
%21 - / becomes
%2F
Try it yourself
You can test how different characters are encoded using our tool below:
Common Encoded Characters
| Character | Encoded |
|---|---|
| Space | %20 |
/ | %2F |
? | %3F |
: | %3A |
@ | %40 |
JavaScript Implementation
In JavaScript, you have two main functions:
encodeURI(): Encodes a complete URI. It does not encode reserved characters like/,?,:.encodeURIComponent(): Encodes a URI component (like a query parameter). It encodes everything.
const url = 'https://example.com/search?q=hello world';
console.log(encodeURI(url));
// Output: https://example.com/search?q=hello%20world
console.log(encodeURIComponent(url));
// Output: https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world
Conclusion
Understanding URL encoding is essential for any web developer. It ensures your data travels safely across the web without breaking the URL structure.