Understanding URL Percent-Encoding (RFC 3986)
Uniform Resource Identifiers (URIs) are restricted to a defined subset of printable US-ASCII characters. When non-ASCII characters, spaces, or reserved punctuation symbols (such as ?, &, =, and #) are included in URLs without proper escaping, web servers and browser routing engines misinterpret query parameters or trigger 400 Bad Request errors. Percent-encoding replaces unsafe characters with a percent sign followed by their two-character hexadecimal UTF-8 byte values.
Scope: Component vs Full URI
Component mode (encodeURIComponent) escapes structural characters like /, ?, and & so that parameter values do not split the overall URL. Full URI mode (encodeURI) leaves protocol and path separators intact.
UTF-8 Multibyte Character Safety
Non-Latin character sets, accents, and emojis consist of multiple UTF-8 bytes. For example, the emoji 🚀 produces four percent-encoded triplets (%F0%9F%9A%80), ensuring accurate transmission across international network hops.
Common URL Encoding Characters Reference
| Character | Percent Code | Meaning in Standard URI | Common Collision / Risk |
|---|---|---|---|
| Space ( ) | %20 or + | Whitespace boundary | Breaks URLs into disconnected strings |
| Ampersand (&) | %26 | Query parameter delimiter | Accidentally splits parameter values |
| Equals (=) | %3D | Key-value pair separator | Distorts token strings like Base64 padding |
| Slash (/) | %2F | Path hierarchy segment separator | Creates phantom path levels in routing |
| Question Mark (?) | %3F | Query string initializer | Truncates route path parsing prematurely |
Frequently Asked Questions
What is the difference between encodeURIComponent and encodeURI?
encodeURI preserves URI protocol delimiters such as http://, colons, slashes, and question marks so the overall link structure stays intact. encodeURIComponent escapes every reserved character (including /, ?, &, and =), making it ideal for encoding individual query string parameters.
Should spaces be encoded as "%20" or "+" in URLs?
According to RFC 3986, %20 is the standard percent-encoding representation for space characters in URL paths and parameters. The + symbol is historically used in application/x-www-form-urlencoded POST data and query strings.
Are my URLs, query parameters, or authorization tokens sent to a backend server?
No. All percent-encoding transformations, character replacements, and decoding routines execute strictly inside your local browser memory via JavaScript. Nothing is sent across the network.