URL Encoder/Decoder

URL Encoding Explained

URL encoding, also known as percent encoding, is the mechanism for encoding information in a Uniform Resource Identifier (URI). URLs can only be sent over the Internet using the ASCII character set, so characters outside this range must be converted into a valid ASCII format. URL encoding replaces unsafe or reserved characters with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII code. For example, a space becomes %20, and an ampersand becomes %26.

encodeURI vs encodeURIComponent

JavaScript provides two built-in functions for URL encoding, and understanding the difference between them is critical for web developers. encodeURI() is designed to encode a complete URI. It preserves characters that have special meaning in a URL structure, such as :, /, ?, #, &, and =. Use encodeURI() when you have a full URL and want to ensure that non-ASCII characters (like spaces in path segments) are properly encoded without breaking the URL structure.

encodeURIComponent(), on the other hand, encodes everything except letters, digits, and a few special characters (- _ . ! ~ * ' ( )). This means it will encode /, ?, &, =, and other URL-significant characters. Use encodeURIComponent() when encoding individual query parameter values, path segments, or any string that will be inserted into a URL. Using encodeURI() for a query parameter value that contains & would leave the ampersand unencoded, potentially splitting it into two parameters.

Common Encoded Characters

The most frequently encoded characters in URLs include: space (%20 or + in query strings), exclamation mark (%21), hash (%23), dollar sign (%24), ampersand (%26), single quote (%27), plus sign (%2B), comma (%2C), forward slash (%2F), colon (%3A), semicolon (%3B), equals (%3D), question mark (%3F), at sign (%40), and square brackets (%5B and %5D). Non-ASCII characters like accented letters are first encoded as UTF-8 bytes and then percent-encoded.

URL Structure Anatomy

A complete URL consists of several parts: the scheme (protocol) such as https, followed by ://, then the host (domain name or IP address), an optional port number preceded by a colon, the path to the resource, an optional query string starting with ? containing key-value pairs separated by &, and an optional fragment identifier starting with #. Each of these components has different rules about which characters must be encoded.

Percent Encoding and Web Security

Proper URL encoding is essential for web security. Failing to encode user-supplied data in URLs can lead to injection attacks, broken redirects, and data corruption. When constructing URLs dynamically in your application, always use encodeURIComponent() for query parameter values to prevent special characters from being interpreted as URL delimiters. Modern web frameworks typically handle URL encoding automatically, but understanding the underlying mechanism helps developers debug issues with encoded characters, especially when working with APIs, webhooks, or third-party integrations that may double-encode or fail to decode parameters correctly.