If you have ever built a web application, worked with APIs, or debugged network requests you have encountered URL encoding — those mysterious strings of percent signs and hexadecimal codes that appear in URLs and query parameters. Understanding URL encoding is essential for every web developer. It affects how you build API requests, how you pass data between pages, and how you prevent security vulnerabilities. This guide explains URL encoding clearly with practical examples.
What is URL Encoding?
URL encoding, officially known as percent encoding, is a mechanism for encoding characters in a Uniform Resource Identifier (URI) that are not allowed or have special meaning. According to the RFC 3986 standard, a URL can only contain a specific set of characters — letters, digits, and a small number of special characters. Any other character must be encoded by replacing it with a percent sign followed by its two-digit hexadecimal UTF-8 code. For example, a space character (ASCII code 32, hexadecimal 20) becomes %20, an ampersand becomes %26, and a question mark becomes %3F.
Why is URL Encoding Necessary?
- URLs use reserved characters like `?`, `&`, `=`, and `#` to structure query strings and fragments. If these characters appear inside a parameter value without encoding they break the URL structure.
- Spaces and many punctuation marks are simply not valid in URLs and must be encoded to be transmitted correctly.
- Non-ASCII characters like accented letters, Chinese characters, or emoji must be encoded as their UTF-8 byte sequences in percent-encoded form.
- Encoding prevents malicious characters from being injected into URLs in a way that could cause security vulnerabilities.
encodeURIComponent vs encodeURI — A Critical Distinction
JavaScript provides two built-in functions for URL encoding and choosing the right one matters significantly. `encodeURI` is designed for encoding a complete URL. It encodes unsafe characters but deliberately leaves structural characters like `:`, `/`, `?`, `#`, `&`, and `=` untouched because these are needed to keep the URL functional. `encodeURIComponent` is designed for encoding individual pieces of data that will be inserted into a URL, such as a query parameter value. It encodes almost everything including the structural characters, which is exactly what you want when the data itself might contain characters like `&` or `=` that would otherwise be interpreted as URL structure.
Simple rule: use encodeURIComponent when encoding a value that goes inside a query string parameter. Use encodeURI when encoding an entire URL that you want to keep structurally intact.
Practical Examples of URL Encoding
- Encoding a search query: `q=hello world` becomes `q=hello%20world` — the space inside the value must be encoded
- Encoding an email in a query parameter: `email=user@example.com` becomes `email=user%40example.com` — the @ must be encoded
- Encoding a redirect URL as a parameter: the entire destination URL must be encoded with encodeURIComponent so its `?`, `&`, and `=` characters do not interfere with the outer URL
- Encoding a name with special characters: `name=John & Jane` becomes `name=John%20%26%20Jane`
URL Encoding in JavaScript
- `encodeURIComponent(value)` — encode a query parameter value, encodes almost everything
- `decodeURIComponent(encoded)` — decode a percent-encoded query parameter value
- `encodeURI(url)` — encode a complete URL, preserves structural characters
- `decodeURI(encodedUrl)` — decode a complete encoded URL
- Never use the deprecated `escape()` and `unescape()` functions — they do not handle Unicode correctly
Common URL Encoding Mistakes to Avoid
- Double encoding — encoding an already-encoded string, turning %20 into %2520. Always decode before re-encoding.
- Using encodeURI when you should use encodeURIComponent — this leaves structural characters unencoded which breaks query parameter values containing & or =
- Forgetting to encode user input before inserting it into URLs — this can cause broken links or open redirect vulnerabilities
- Assuming + means the same as %20 everywhere — + represents a space only in application/x-www-form-urlencoded format, not in path segments
Always encode user-supplied data before including it in a URL. Unencoded user input in URLs can cause broken functionality and in some cases open redirect security vulnerabilities.