Introduction
URL encoding explained simply: it is the process of converting special characters into a format that can be safely transmitted over the internet. Also called percent encoding, URL encoding replaces unsafe characters with a percent sign (%) followed by their hexadecimal ASCII value. For example, a space becomes %20, a question mark becomes %3F, and an ampersand becomes %26.
URLs can only contain certain characters: letters (A-Z, a-z), digits (0-9), hyphens (-), periods (.), underscores (_), and tildes (~). Any other character, including spaces, special symbols, and accented letters, must be encoded before inclusion in a URL. Without encoding, URLs can break, return incorrect results, or create security vulnerabilities.
Why Special Characters Must Be Encoded
Some characters have special meaning in URLs. The question mark (?) starts the query string, the ampersand (&) separates multiple parameters, and the hash (#) indicates a fragment identifier. If you want to include these characters as literal values in a URL parameter, they must be encoded, or the browser will interpret them as URL structure rather than data.
For example, if you want to search for "hello & goodbye", the ampersand in the query parameter value would be misinterpreted as a parameter separator. The solution is to encode the ampersand as %26: https://example.com/search?q=hello%20%26%20goodbye. Spaces must also be encoded because URLs cannot contain literal spaces. A space is encoded as %20.
Percent Encoding Format
Percent encoding uses the format %XX, where XX is the two-digit hexadecimal representation of the character’s ASCII or UTF-8 byte value. The percent sign (%) acts as an escape character, signaling that the following two characters represent the encoded value. The encoding is case-insensitive for the hexadecimal digits, though lowercase is preferred for consistency.
The encoding process is straightforward: take the character code of the unsafe character, convert it to hexadecimal, and prepend a percent sign. For instance, the character "@" has ASCII code 64, which is 40 in hexadecimal, so "@" is encoded as %40.
Common Encoded Characters Table
| Character | Encoded Value | Reason |
|---|---|---|
| Space | %20 | Not allowed in URLs |
| ! | %21 | Unsafe character |
| # | %23 | Fragment identifier |
| $ | %24 | Unsafe character |
| % | %25 | Escape character itself |
| & | %26 | Parameter separator |
| + | %2B | Represents space in query strings |
| ? | %3F | Query string start |
| @ | %40 | Unsafe in some contexts |
| ~ | %7E | Safe but may be encoded |
URL Encoding in JavaScript
JavaScript provides two built-in functions for URL encoding. encodeURI() encodes a complete URI while preserving characters that have special meaning in URIs (like ?, #, and /). encodeURIComponent() encodes a URI component and encodes all special characters, making it the right choice for encoding query parameter values. Use decodeURI() and decodeURIComponent() for decoding.
Example: encodeURIComponent("hello & goodbye") returns "hello%20%26%20goodbye". This encoded string is safe to include as a query parameter value without breaking the URL structure.
Encoding vs Double Encoding
Single encoding converts a special character into its percent-encoded form once: hello world → hello%20world. Double encoding encodes an already-encoded string a second time: hello world → hello%20world → hello%2520world. Double encoding is almost always a mistake and causes URLs to break, so always encode data at the source exactly once.
Practical Examples
Example 1: A search query for "free online tools for developers" becomes "free%20online%20tools%20for%20developers". Without encoding, the spaces would break the URL.
Example 2: An API endpoint with parameters: https://api.example.com/users?name=John%20Doe&filter=status%3Dactive%26role%3Dadmin. The & in the filter value is encoded as %26 to prevent it from being interpreted as a parameter separator.
Example 3: A redirect URL parameter: https://example.com/login?redirect=%2Fdashboard%3Ftab%3Dsettings. The forward slash and question mark in the redirect URL are encoded to preserve the nested URL structure.
Frequently Asked Questions
What is URL encoding?
URL encoding (percent encoding) converts unsafe characters in URLs into a percent sign followed by two hexadecimal digits. It ensures that URLs are valid, secure, and correctly interpreted by browsers and servers.
Why do URLs need encoding?
URLs can only contain a limited set of characters. Special characters like spaces, ampersands, question marks, and hashes have reserved meanings in URLs. Encoding these characters prevents them from being misinterpreted and breaking the URL structure.
What is the difference between encodeURI and encodeURIComponent?
encodeURI encodes a complete URI and preserves characters that have special URI meaning (like ?, /, #). encodeURIComponent encodes a URI component and encodes all special characters. Use encodeURIComponent for encoding query parameter values.
Is %20 the same as + in URLs?
In query strings (the part after ?), + represents a space in application/x-www-form-urlencoded format. However, %20 is the standard URL encoding for spaces and works everywhere. Most modern systems prefer %20 over + for consistency.
What is the difference between single and double URL encoding?
Single encoding converts a special character into its percent-encoded form once (for example, a space becomes %20). Double encoding encodes an already-encoded string a second time, turning %20 into %2520. Double encoding is almost always a mistake and causes URLs to break, so encode data at the source exactly once.
How do I decode a URL in JavaScript?
Use decodeURI() to decode a complete URI and decodeURIComponent() to decode an encoded component. These functions reverse the encoding performed by encodeURI and encodeURIComponent respectively.
Conclusion
URL encoding is a fundamental skill for any web developer working with APIs, form submissions, or dynamic URLs. Understanding how percent encoding works, why certain characters must be encoded, and the difference between encodeURI and encodeURIComponent prevents a wide range of bugs that are difficult to diagnose. From search queries with spaces and ampersands to OAuth redirect URLs and API parameters with special characters, proper encoding ensures your URLs work correctly across all browsers and servers.
The best practice is to let your framework handle encoding when possible, always use UTF-8, and test with real-world special characters early. When manually encoding, remember that spaces become %20, reserved characters like & and ? must be encoded in parameter values, and double-encoding is a common mistake that breaks URLs. With these fundamentals, you can handle any URL encoding scenario confidently and avoid the subtle bugs that incorrect encoding introduces.
Try URL Encoding Yourself
Now that you understand how URL encoding works, try encoding and decoding URLs yourself. Use our free URL Encoder/Decoder online to instantly encode special characters for safe URLs or decode percent-encoded strings—no signup required.
Frequently asked questions
What is URL encoding?
URL encoding (percent encoding) converts unsafe characters in URLs into a percent sign followed by two hexadecimal digits. It ensures that URLs are valid, secure, and correctly interpreted by browsers and servers.
Why do URLs need encoding?
URLs can only contain a limited set of characters. Special characters like spaces, ampersands, question marks, and hashes have reserved meanings in URLs. Encoding these characters prevents them from being misinterpreted and breaking the URL structure.
What is the difference between encodeURI and encodeURIComponent?
encodeURI encodes a complete URI and preserves characters that have special URI meaning (like ?, /, #). encodeURIComponent encodes a URI component and encodes all special characters. Use encodeURIComponent for encoding query parameter values.
Is %20 the same as + in URLs?
In query strings (the part after ?), + represents a space in application/x-www-form-urlencoded format. However, %20 is the standard URL encoding for spaces and works everywhere. Most modern systems prefer %20 over + for consistency.
What is the difference between single and double URL encoding?
Single encoding converts a special character into its percent-encoded form once (for example, a space becomes %20). Double encoding encodes an already-encoded string a second time, turning %20 into %2520. Double encoding is almost always a mistake and causes URLs to break, so encode data at the source exactly once.
How do I decode a URL in JavaScript?
Use decodeURI() to decode a complete URI and decodeURIComponent() to decode an encoded component. These functions reverse the encoding performed by encodeURI and encodeURIComponent respectively.