What is URL Encoding?
URL encoding (also called percent-encoding) converts characters that are not safe in URLs into a format that can be safely transmitted over the internet. Each unsafe character is replaced with a percent sign (%) followed by two hexadecimal digits representing the character's UTF-8 byte value. For example, a space becomes %20, and & becomes %26.
URLs can only contain a limited set of safe ASCII characters. Any character outside that set β including spaces, Unicode characters, and most punctuation β must be encoded before being included in a URL.
encodeURIComponent vs encodeURI
- encodeURIComponent β Encodes everything except letters, digits, and
- _ . ! ~ * ' ( ). Use this for encoding individual query parameter values or path segments. It encodes characters like/,?,#, and&which are structural URL characters. - encodeURI β Encodes a complete URL, preserving the characters that have structural meaning:
/ ? # & = : @. Use this when encoding an entire URL rather than a single value.
In most cases, encodeURIComponent is what you want β especially when building query strings or embedding URLs inside other URLs.
Common Use Cases
- Query string parameters β When building URLs with user-supplied values, encode each parameter value with encodeURIComponent to prevent special characters from breaking the URL structure.
- API requests β Search queries, filters, and IDs containing special characters must be encoded before being appended to API endpoint URLs.
- Sharing URLs β URLs containing non-ASCII characters (like accented letters or emojis) must be percent-encoded before sharing to ensure they open correctly in all browsers.
- Debugging β Decode an encoded URL to see the original plain-text values when debugging API calls or reading server logs.
Frequently Asked Questions
What is the difference between %20 and +?
Both represent a space, but in different contexts. %20 is the standard percent-encoding for a space and works in all parts of a URL. The + sign represents a space only in the query string portion of a URL (application/x-www-form-urlencoded format), which is what HTML forms use. This tool uses %20 via encodeURIComponent, which is the safer and more universally correct choice.
Does it support Unicode?
Yes. Non-ASCII characters (like ΓΌ, δΈ, or π) are first converted to their UTF-8 byte sequences, then each byte is percent-encoded. For example, the emoji π becomes %F0%9F%98%80 (its 4-byte UTF-8 representation).
Does it work offline?
Yes. All encoding and decoding uses the browser's built-in encodeURIComponent(), encodeURI(), decodeURIComponent(), and decodeURI() functions. No network requests are made.