What Is URL Encoding?
URL encoding (also called percent-encoding) converts special characters in a URL into a format that can be safely transmitted over the internet. Characters like spaces, ampersands, and question marks have special meanings in URLs, so they must be encoded.
Why URL Encoding Matters
URLs can only contain certain characters from the ASCII character set. Characters outside this set — or characters with special URL meanings — must be encoded. Without proper encoding:
- Links break when they contain spaces or special characters
- API requests fail with malformed query parameters
- Security vulnerabilities like injection attacks can occur
- Data loss when special characters are stripped or misinterpreted
How URL Encoding Works
Each unsafe character is replaced with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII code.
Common Encodings
| Character | Encoded | Description |
| (space) | %20 | Space character |
| ! | %21 | Exclamation mark |
| # | %23 | Hash/pound sign |
| $ | %24 | Dollar sign |
| & | %26 | Ampersand |
| + | %2B | Plus sign |
| = | %3D | Equals sign |
| ? | %3F | Question mark |
| @ | %40 | At sign |
Real-World Examples
Search Query
- Before:
https://example.com/search?q=hello world&lang=en - After:
https://example.com/search?q=hello%20world&lang=en
File Path
- Before:
https://example.com/files/my document (final).pdf - After:
https://example.com/files/my%20document%20(final).pdf
API Parameters
- Before:
https://api.example.com/data?filter=price>100&sort=name - After:
https://api.example.com/data?filter=price%3E100&sort=name
URL Encoding in JavaScript
// Encode a full URI
encodeURI("https://example.com/path with spaces");
// "https://example.com/path%20with%20spaces"
// Encode a URI component (query parameters)
encodeURIComponent("hello world & goodbye");
// "hello%20world%20%26%20goodbye"
// Decode
decodeURIComponent("hello%20world");
// "hello world"
encodeURI vs encodeURIComponent
- encodeURI — encodes a full URL, preserving :, /, ?, #, &
- encodeURIComponent — encodes everything, including :, /, ?, #, &
Use encodeURIComponent for query parameter values. Use encodeURI for full URLs.
Common Mistakes
Free URL Encoder/Decoder
Try our URL Encoder/Decoder tool — encode and decode URLs instantly in your browser. No data is sent to any server, keeping your URLs private.