URLs are the addressing system of the web — every resource has one. But URLs were designed with a limited character set, and the modern web constantly needs to pass data containing characters outside that set. URL encoding, also called percent-encoding, is the solution that makes this possible.
Why URLs Have Character Restrictions
The URL specification (RFC 3986) defines "unreserved characters" safe anywhere in a URL: letters, digits, hyphens, underscores, periods and tildes. All other characters — including spaces, ampersands and equals signs — have special structural meanings or are not guaranteed to be handled correctly by all systems.
How Percent-Encoding Works
Percent-encoding replaces a character with a percent sign followed by the two-digit hexadecimal value of that character in UTF-8. A space (ASCII 32, hex 20) becomes %20. An ampersand (hex 26) becomes %26. For non-ASCII characters, the character is first encoded as UTF-8 bytes and each byte is percent-encoded separately.
encodeURI vs encodeURIComponent
encodeURI() is for encoding a complete URL — it leaves structure characters like : / ? = & unencoded.
encodeURIComponent() is for encoding a single component like a query value — it encodes everything except unreserved characters. The most common mistake is using encodeURI for parameter values containing ampersands or equals signs.
URL Encoding in Query Strings
Query strings use the format key=value&key2=value2. Both keys and values must be encoded. The unencoded query search=JSON & XML parses as two separate parameters. Correctly encoded: search=JSON%20%26%20XML.
URL-Safe Base64
Standard Base64 uses + and / which require encoding in URLs. URL-safe Base64 replaces these with - and _, producing strings safe for URLs without additional encoding — used in JWT tokens and OAuth parameters.
Practical Tips
Always encode query parameter values when constructing URLs programmatically. Never concatenate user input into a URL without encoding. When debugging URL issues, decode the full URL first — the PursTech URL Encoder handles both encoding and decoding with a single click.