URL Encoding Explained
URL encoding (percent-encoding) replaces unsafe ASCII characters in URLs with %XX hex codes so links parse correctly.
Quick answer
URL encoding represents characters as `%` followed by two hexadecimal digits (e.g., space → `%20` or `+` in query strings historically). encodeURIComponent encodes query parameter values; encodeURI preserves URL structure characters. Encode user input before inserting into URLs to avoid broken links and injection issues.
Overview
URLs allow only a limited ASCII character set unescaped; spaces, ampersands, unicode emoji, and non-Latin scripts require percent-encoding for reliable HTTP requests. Developers encode query parameters when building search links, OAuth redirects, and tracking URLs. Confusion between encodeURI, encodeURIComponent, and form application/x-www-form-urlencoded rules causes double-encoding or broken decoding— `%2520` instead of `%20`. HTML form submission, JavaScript fetch APIs, and server frameworks each expose encoding helpers; use the right layer for path vs query vs fragment components.
Which characters get encoded
Reserved characters like `?`, `&`, `=`, `#`, `/` have syntactic meaning in URLs—encode them in data values but not when they separate URL parts structurally. Unreserved alphanumerics and `-_.~` typically pass through.
Unicode text UTF-8 encodes to bytes then each byte percent-encoded—emoji and CJK characters become long percent sequences, normal and expected.
Query strings and form semantics
HTML forms historically encode spaces as `+` in application/x-www-form-urlencoded bodies; URLs in address bar use `%20`. Modern encodeURIComponent uses `%20` for spaces—know consumer expectations when parsing.
Multiple values for same key (`tag=a&tag=b`) require consistent server parsing. Encode keys and values separately before joining with `&`.
encodeURI vs encodeURIComponent
encodeURI escapes illegal characters in full URI but preserves `:/?#[]@!$&'()*+,;=` needed for structure—use for whole URL strings with existing delimiters.
encodeURIComponent encodes nearly everything including structure chars—use for individual query parameter values inserted into template URLs.
Encoding and security context
Encoding is not validation—sanitize and validate decoded input server-side against injection and open redirect attacks. Overly permissive redirect_uri parameters exploit decoding inconsistencies.
Log decoded values for debugging but store canonical encoded form in analytics when comparing duplicate detection—double-encoding skews reports.
Debugging broken links
Symptoms: truncated query, split email addresses at `@`, broken plus signs in phone numbers. Decode in browser devtools Network tab; compare raw vs displayed URL.
UTM campaigns and affiliate tags fail attribution when `&` inside unencoded campaign names splits parameters—encode marketing copy pasted into query builders.
Examples
Search query coffee & tea
Value must encode ampersand: `q=coffee+%26+tea` or `q=coffee%20%26%20tea` so parser does not treat `&` as new parameter.
Redirect with email
login@example.com in query → login%40example.com to preserve @ in value portion.
Common mistakes and edge cases
- Double-encoding already encoded strings.
- Using encodeURI on individual query values, leaving & unescaped.
- Assuming + always means space outside form-urlencoded context.
- Mixing encodeURIComponent output with manually appended unencoded fragments.
Related resources
Related tools
Last reviewed: 2026-05-23