URL Encoder/Decoder
Encode and decode URLs with support for query parameters, full URIs, form data encoding, and RFC3986 compliance. All processing happens in your browser for complete privacy.
Output will appear here...
About URL Encoding
URL encoding (percent-encoding) converts characters into a format that can be safely transmitted over the Internet. Special characters are replaced with % followed by hexadecimal values.
- Component: For query parameters and fragments (encodeURIComponent)
- Full URI: For complete URLs, preserves URI structure (encodeURI)
- Form Data: Uses + for spaces (application/x-www-form-urlencoded)
- RFC3986: Strict encoding including !, ', (, ), *
What is URL Encoding?
URL encoding, also known as percent-encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI) by replacing certain characters with one or more character triplets consisting of the percent character (%) followed by two hexadecimal digits. This encoding method ensures that URLs can be safely transmitted over the Internet, as many protocols only support a limited set of ASCII characters.
The need for URL encoding arises because URLs can only contain a specific set of characters from the US-ASCII character set. Characters outside this set, as well as certain reserved characters that have special meanings in URLs (like ?, &, =, #, and spaces), must be encoded to prevent misinterpretation by web servers, browsers, and other web components.
For example, a space character is encoded as %20 (or + in form data), while special characters like @ becomes %40, # becomes %23, and so on. This ensures that data integrity is maintained during transmission and that URLs are interpreted correctly regardless of the system or application processing them.
Common Use Cases for URL Encoding
Query Parameters
Query parameters in URLs must be properly encoded to handle special characters, spaces, and non-ASCII text. For example, search queries, filter values, and user input sent via GET requests all require URL encoding to ensure proper transmission.
Form Submissions
HTML forms with method="GET" automatically URL-encode form data before submitting. Understanding URL encoding is essential for debugging form submissions, creating custom query strings, or working with application/x-www-form-urlencoded data.
API Development
RESTful APIs often use URL parameters for filtering, sorting, and pagination. Properly encoding these parameters ensures that special characters in filter values, search terms, or identifiers don't break API requests or cause security vulnerabilities.
OAuth and Authentication
OAuth flows require encoding redirect URIs, state parameters, and other values passed in URLs. Improper encoding can cause authentication failures, security issues, or redirect mismatches in OAuth implementations.
Email Links
mailto: links with pre-filled subject lines, body text, or CC/BCC addresses require URL encoding. This is especially important when including line breaks, special characters, or non-English text in email templates or automated communications.
Internationalization
URLs containing non-ASCII characters (Chinese, Arabic, emoji, etc.) must be encoded using UTF-8 and percent-encoding. This allows international domain names, multilingual content, and unicode characters to be safely transmitted in URLs.
Understanding Different Encoding Modes
Component Encoding (encodeURIComponent)
This is the most commonly used encoding method for individual URL components like query parameters, path segments, or fragment identifiers. It encodes all characters except:
- Alphanumeric characters: A-Z, a-z, 0-9
- Unreserved characters: - _ . ! ~ * ' ( )
Use this when: Encoding individual parameter values, path segments, or any data that will be inserted into a URL. This ensures that characters like &, =, ?, and / are encoded and won't be interpreted as URL structure.
Full URI Encoding (encodeURI)
This mode is designed for encoding complete URLs. It encodes most characters but preserves those that have special meaning in URIs, including: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
Use this when: Encoding an entire URL string while preserving its structure. This is useful when you need to encode spaces or non-ASCII characters in a URL without breaking its syntax.
Form Data Encoding (application/x-www-form-urlencoded)
This encoding method is used by HTML forms with the default content type. It's similar to encodeURIComponent but with one key difference: spaces are encoded as + instead of %20. This format is the standard for POST request bodies and GET query strings from HTML forms.
Use this when: Working with HTML form submissions, creating form-like POST bodies, or debugging form data. Note that when decoding, both %20 and + are correctly interpreted as spaces.
RFC3986 Strict Encoding
RFC3986 is the current standard for URI syntax. This mode extends encodeURIComponent by also encoding the characters ! ' ( ) *, which are technically reserved in the RFC3986 specification even though JavaScript's built-in encodeURIComponent doesn't encode them.
Use this when: You need strict compliance with RFC3986, working with systems that expect these characters to be encoded, or when maximum compatibility across different URL parsers is required.
Frequently Asked Questions
What's the difference between encodeURI and encodeURIComponent?
encodeURI is designed to encode a complete URI while preserving characters that have special meaning in URIs (like :, /, ?, #). encodeURIComponent encodes everything except unreserved characters, making it suitable for encoding individual components like query parameter values. Use encodeURIComponent for parameter values and encodeURI only when encoding an entire URL.
Why do I see + instead of %20 for spaces sometimes?
The + character is used to represent spaces in the application/x-www-form-urlencoded format, which is the default encoding for HTML forms. While %20 is the standard percent encoding for space, + is specifically used in query strings and form data for historical reasons. When decoding, both should be treated as spaces. Our tool supports both formats.
Can I encode URLs with international characters?
Yes! Our tool automatically handles Unicode characters using UTF-8 encoding. Characters like Chinese, Arabic, Cyrillic, or emoji are first converted to their UTF-8 byte representation, then each byte is percent-encoded. For example, "你好" becomes "%E4%BD%A0%E5%A5%BD". This is the standard way international domain names and multilingual URLs work.
Is URL encoding the same as HTML encoding?
No, they serve different purposes. URL encoding (percent-encoding) is for safely transmitting data in URLs, using % followed by hexadecimal digits. HTML encoding uses entities like & and < to display special characters in HTML content. You need URL encoding for URLs and HTML encoding for displaying text in HTML. They're not interchangeable.
Why does my URL have double encoding?
Double encoding occurs when already-encoded data is encoded again. For example, encoding "hello world" gives "hello%20world", but encoding that again gives "hello%2520world" (where %20 becomes %2520). This usually happens due to programming errors where data is encoded multiple times. Always ensure you only encode raw data once before adding it to a URL.
Is my data safe when using this tool?
Absolutely. All encoding and decoding operations happen entirely in your browser using JavaScript. No data is ever sent to our servers or any third party. You can even use this tool offline once the page is loaded. Your privacy and data security are completely protected.
What characters need to be URL encoded?
Any character that's not an unreserved character should be encoded. Unreserved characters are: A-Z, a-z, 0-9, hyphen (-), underscore (_), period (.), and tilde (~). Everything else, including spaces, special characters, and non-ASCII characters, should be percent-encoded. Reserved characters like ?, &, =, #, / should always be encoded when they're part of data, not URL structure.
How do I decode malformed URLs?
Malformed URLs can occur from invalid percent sequences (like %2G where G isn't a hex digit) or incomplete encoding. Our tool will display an error message if the URL can't be decoded. Common issues include: missing the second hex digit after %, using lowercase hex digits inconsistently, or having actual % characters that should be encoded as %25. Try fixing these issues manually or re-encoding the original data.
Can I use this for OAuth redirect URIs?
Yes! OAuth redirect URIs must be properly URL-encoded when passed as parameters to authorization endpoints. Use the "Component" encoding mode to encode your redirect URI before adding it to the authorization URL. This ensures that query parameters in your redirect URI don't interfere with the authorization server's parameters.
What browsers are supported?
This tool works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It uses standard JavaScript functions (encodeURIComponent, encodeURI, decodeURIComponent) that have been supported in all browsers for many years. The tool is fully responsive and works on desktop, tablet, and mobile devices.
Technical Details and Standards
URL encoding is standardized in several RFCs (Request for Comments):
- RFC 3986: The current standard for URI syntax, which defines percent-encoding and the characters that must be encoded in different URI components
- RFC 1738: The original specification for URL syntax, which introduced percent-encoding (now superseded by RFC 3986)
- RFC 3987: Internationalized Resource Identifiers (IRIs), which extends URIs to support Unicode characters directly
- HTML Living Standard: Defines the application/x-www-form-urlencoded format used by HTML forms
Percent-encoding represents characters as % followed by two hexadecimal digits. For example:
- Space: %20 (or + in form data)
- Exclamation mark (!): %21
- Double quote ("): %22
- Percent sign (%): %25
- Ampersand (&): %26
- Plus (+): %2B
- Forward slash (/): %2F
- Question mark (?): %3F
- Equals (=): %3D
For multi-byte UTF-8 characters, each byte is individually percent-encoded. For example, the emoji 😀 (U+1F600) is encoded in UTF-8 as four bytes: F0 9F 98 80, which becomes %F0%9F%98%80 in URL encoding.
Best Practices
Always Encode User Input
Never trust user input to be URL-safe. Always encode data from forms, search queries, or any user-provided values before adding them to URLs. This prevents both functionality issues and security vulnerabilities like URL injection attacks.
Use the Right Encoding Method
Choose encodeURIComponent for parameter values and path segments, encodeURI for complete URLs, and form data encoding only when working with HTML forms. Using the wrong method can cause characters to be incorrectly interpreted.
Avoid Double Encoding
Only encode data once. Check if your framework or library automatically encodes URLs before manually encoding. Double encoding makes URLs unnecessarily long and can cause decoding issues on the receiving end.
Test International Characters
If your application serves international users, test URL encoding with non-ASCII characters, emoji, and right-to-left text. Ensure your backend correctly handles UTF-8 encoded URLs and that your URL length limits account for multi-byte characters.
Related Tools
Explore other encoding and developer tools to streamline your workflow: