What Is URL Encoding?
URL encoding (also called percent encoding) converts characters that are not allowed or have special meaning in URLs into a safe format. Each unsafe character is replaced with a % sign followed by two hexadecimal digits representing the character's UTF-8 byte value. For example, a space becomes %20, an ampersand becomes %26 and a forward slash becomes %2F. URL encoding is defined in RFC 3986.
URLs can only contain a limited set of ASCII characters. All other characters — including Unicode characters, spaces, punctuation and binary data — must be percent-encoded before being included in a URL. This is essential for internationalized URLs, query string parameters, file paths with special characters and API request bodies.
encodeURI vs encodeURIComponent vs Form Encoding
| Function | Keeps unencoded | Best used for |
|---|---|---|
| encodeURI() | A–Z a–z 0–9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # | Encoding a complete URL |
| encodeURIComponent() | A–Z a–z 0–9 - _ . ! ~ * ' ( ) | Encoding individual query parameter values |
| Form encoding (+) | A–Z a–z 0–9 - _ . * (space → +) | HTML form submissions (application/x-www-form-urlencoded) |
URL Components Explained
A full URL like https://user:pass@example.com:8080/path/to/page?key=value&foo=bar#section contains distinct components: the scheme (https), optional username and password (user:pass), host (example.com), optional port (8080), path (/path/to/page), query string (?key=value&foo=bar) and fragment (#section). The URL Parser tab above breaks any URL into these components instantly.
Query String Best Practices
Always encode query parameter values using encodeURIComponent() — not the entire URL. Encode keys as well if they contain special characters. Use & to separate parameters and = to separate each key from its value. Avoid putting sensitive data like passwords or API keys in query strings since they appear in server logs, browser history and referrer headers. For arrays, common conventions are tag[]=a&tag[]=b, tag=a&tag=b or tag=a,b — check your backend framework's expected format.