Part of our Free Developer Tools collection
Every time you submit a form, click a link with query parameters, or share a URL containing special characters, URL encoding is happening behind the scenes. This guide explains what URL encoding is, why it exists, and the critical difference between encodeURI and encodeURIComponent that trips up even experienced developers.
What URL Encoding Does
URL encoding, also called percent encoding, converts characters that are not allowed in URLs into a safe format. It replaces unsafe characters with a percent sign (%) followed by two hexadecimal digits representing the character’s ASCII or UTF-8 byte value.
For example, a space becomes %20. An ampersand (&) becomes %26. A non-ASCII character like the Arabic letter “م” becomes %D9%85 — its two UTF-8 bytes expressed in hexadecimal.
The core problem: URLs were designed in the early 1990s for ASCII-only environments. The specification (RFC 3986) defines a limited set of characters that are safe in URLs: letters, digits, and a handful of symbols (- _ . ~). Everything else must be encoded to avoid breaking the URL structure.
Why URLs Need Encoding
Without encoding, special characters in URLs cause ambiguity. Consider this URL:
https://example.com/search?q=rock & roll&page=1
Is the ampersand part of the search query “rock & roll” or is it separating query parameters? The browser cannot tell. With encoding, the intended meaning is clear: the search term is “rock %26 roll” and the parameter separator is the literal & character.
This applies to spaces, forward slashes, question marks, hash symbols, equals signs, and any character that has structural meaning in a URL.
encodeURI vs encodeURIComponent
JavaScript provides two built-in functions for URL encoding, and using the wrong one is one of the most common bugs in web development.
encodeURIComponent encodes everything except: A-Z a-z 0-9 – _ . ~ and is designed for encoding individual values — query parameter values, path segments, or fragment identifiers. It encodes characters like : / ? # & = that have structural meaning in URLs.
encodeURI preserves the URL structure. It does not encode : / ? # & = because it assumes you are encoding a complete, valid URL that already has these structural characters in the right places. It only encodes characters that are never valid in any part of a URL.
| Scenario | Use | Why |
|---|---|---|
| Query parameter value | encodeURIComponent | Must encode & and = to avoid breaking the query string |
| Complete URL with parameters | encodeURI | Preserve : / ? # structure |
| Path segment | encodeURIComponent | Must encode / to avoid creating extra path levels |
| Cookie value | encodeURIComponent | Must encode ; and = which delimit cookies |
| Redirect URL in a parameter | encodeURIComponent | The entire URL is a value — must encode everything |
The rule of thumb: if you are encoding a piece of data that will be placed inside a URL, use encodeURIComponent. If you are encoding an entire URL, use encodeURI.
Common Use Cases
Form Submissions
When you submit an HTML form with method=”GET”, the browser URL-encodes all form values and appends them as query parameters. Spaces become + (application/x-www-form-urlencoded) or %20 (standard percent encoding).
API Requests
API query parameters, especially those containing user input, must be URL-encoded to prevent injection and ensure correct parsing. Most HTTP libraries handle this automatically, but manual URL construction requires explicit encoding.
Sharing Links with Special Characters
Links containing non-English text, emoji, or special characters need encoding to work across all browsers and platforms. Modern browsers display decoded URLs in the address bar but transmit encoded versions.
Redirect URLs
When passing a full URL as a query parameter (common in OAuth flows and login redirects), the entire redirect URL must be encodeURIComponent-encoded to prevent the inner URL’s structure from interfering with the outer URL.
UTF-8 and International Characters
Modern URL encoding uses UTF-8 as the character encoding. A non-ASCII character is first converted to its UTF-8 byte sequence, then each byte is percent-encoded. For example, the Arabic word “مرحبا” becomes %D9%85%D8%B1%D8%AD%D8%A8%D8%A7 — five characters producing ten percent-encoded bytes.
This is why our tool supports full Unicode including Arabic, Urdu, Hindi, CJK characters, and emoji. Every character encodes correctly because the tool uses the browser’s native encoding functions which follow the UTF-8 standard.
Try It Yourself
We built a free URL encoder/decoder that runs entirely in your browser. It supports both Component mode (encodeURIComponent) and Full URL mode (encodeURI), handles full UTF-8, and sends nothing to any server.
Try the Free URL Encoder/Decoder →
The tool is part of TheToolFather, a collection of 99 free online tools. All tools are privacy-first — everything runs client-side.
Frequently Asked Questions
What is URL encoding used for?
URL encoding converts special characters into a safe format for use in URLs. It ensures URLs are parsed correctly by browsers and servers, preventing ambiguity with structural characters.
What is the difference between encodeURI and encodeURIComponent?
encodeURIComponent encodes all special characters including URL structure characters, making it suitable for encoding values within a URL. encodeURI preserves URL structure characters, suitable for encoding complete URLs.
Why do spaces become %20 or +?
The standard percent-encoding for a space is %20. The + encoding comes from the older application/x-www-form-urlencoded format used by HTML forms. Both represent a space but in different contexts.
Ready to encode or decode URLs? Use our free URL encoder →