What Is URL Encoding?
URL encoding (formally called percent encoding) represents a character's UTF-8 bytes with a percent sign followed by two hexadecimal digits per byte. For example, a space becomes %20, an ampersand becomes %26, and the at sign becomes %40. Which characters should be encoded depends on whether the input is a path segment, query value, or complete URL.
This standard is defined in RFC 3986 and is essential for safely transmitting data in URLs. Without encoding, browsers and servers would misinterpret characters like & (parameter separator), = (key-value separator), and ? (query start) as structural URL elements rather than literal data values.
encodeURI vs encodeURIComponent
JavaScript provides two encoding functions that behave very differently and are suited for different use cases:
| Character | encodeURI() | encodeURIComponent() | Context |
|---|---|---|---|
| https:// | Preserved | Encoded %3A%2F%2F | encodeURI preserves protocol |
| ?query=x | Preserved | Encoded | encodeURI preserves query structure |
| hello world | hello%20world | hello%20world | Both encode spaces |
| #section | Preserved | Encoded %23section | Use encodeURIComponent for values |
| a&b=c | Preserved | a%26b%3Dc | Encode param values with URIComponent |
| email@x.com | email@x.com | email%40x.com | @ is safe in URI but encoded in Component |
Use encodeURI() when:
- Preparing a complete URL while preserving its delimiters
- Preserving the URL’s structure (protocol, slashes, query markers)
- Encoding spaces and non-ASCII text without encoding : / ? # & =
Use encodeURIComponent() when:
- Encoding a value that will be inserted as a query parameter
- Encoding a redirect URL inside another URL’s query string
- Encoding a path segment, search term, or API request parameter
Common URL Encoding Mistakes
✗ Double-encoding URLs
→ If a URL is already encoded, encoding it again turns %20 into %2520. Always decode first, then re-encode if needed.
✗ Using encodeURI for query values
→ encodeURI() does not encode & = # ? because they have structural meaning. Encode an individual value with component mode before adding it to the URL.
✗ Encoding entire redirect URLs with encodeURI()
→ A redirect URL embedded as a query parameter value must be encoded with encodeURIComponent() to prevent it from being parsed as part of the parent URL's query string.
✗ Assuming + always means a space
→ + is converted to a space by application/x-www-form-urlencoded parsers such as URLSearchParams, but not by decodeURIComponent(). Use the tool’s form-space option only for form-style data.
✗ Treating encoding as sanitization
→ Percent encoding preserves data inside one URL component; it does not validate a protocol, make HTML safe, or authorize a destination. Validate allowed schemes and hosts separately.
Encoding Does Not Sanitize or Secure a URL
Validate destinations
Allow only the protocols, hosts, ports, and paths your application expects. Encoding does not make javascript: or an untrusted redirect destination safe.
Encode one component
Build a URL with the URL and URLSearchParams APIs, or encode individual values before insertion. Do not encode an assembled URL as though it were one value.
Keep secrets out
Do not put passwords, API keys, access tokens, or sensitive personal data in URLs. Encoding remains reversible and URLs are commonly logged or shared.
Continue Your Developer Workflow
Add correctly encoded campaign parameters with the UTM Builder, inspect API payloads using the JSON Formatter & Validator, convert text to a different transport representation with the Base64 Encoder & Decoder, or examine token claims before encoding a URL parameter in the JWT Decoder & Debugger.
Want to follow the complete browser and network journey behind an address? Read What Happens When You Type a URL?
To see how the browser parses addresses, requests resources, runs JavaScript, and renders a page, continue with How Web Browsers Work.
To understand how the hostname inside a URL is resolved before the browser connects, read How DNS Works.
For the history behind URLs, HTTP, HTML, and the open web, read the Tim Berners-Lee profile.
Percent-Encoding and Browser API References
URI syntax and percent-encoding rules are defined by RFC 3986. Browser behavior is documented in MDN's encodeURIComponent reference and URLSearchParams documentation. External references open in a new tab.