URL Encoder
Encode and decode URL strings
What is URL Encoding?
URL encoding (also known as percent-encoding) is a mechanism for encoding information in a Uniform Resource Identifier (URI). It replaces unsafe ASCII characters with a "%" followed by two hexadecimal digits.
Common Encoded Characters:
How It Works
URL encoding follows the RFC 3986 specification, which defines a set of "unreserved" characters that don't need encoding (A-Z, a-z, 0-9, -, _, ., ~) and "reserved" characters that have special meaning in URLs and must be encoded when used in parameter values. The encoding process converts each unsafe character to its UTF-8 byte representation, then represents each byte as a percent sign followed by two hexadecimal digits.
The algorithm works by examining each character in the input string. Characters that are considered safe (alphanumeric and certain punctuation) are left unchanged. All other characters are converted to their hexadecimal representation. For example, a space character (ASCII 32) becomes %20, where 20 is the hexadecimal representation of 32.
This implementation uses JavaScript's built-in encodeURIComponent() and decodeURIComponent() functions, which follow the modern URI specification and properly handle Unicode characters by encoding them as UTF-8 byte sequences before applying percent-encoding.
Practical Use Cases
1. Web Form Data Transmission
When submitting HTML forms via GET or POST methods, form data is automatically URL-encoded to ensure special characters in user input don't break the HTTP request structure. This is crucial for handling user names, addresses, or comments that might contain spaces, punctuation, or international characters.
2. Query Parameter Construction
API developers frequently need to construct URLs with query parameters containing user input or dynamic data. URL encoding ensures that special characters in parameter values don't interfere with URL parsing. For example, searching for "C++ programming" requires encoding the plus signs.
3. Deep Linking & URL Shortening
Mobile app deep links and URL shorteners often need to encode complex data structures within URLs. URL encoding allows embedding JSON data, user preferences, or navigation state directly in URLs while maintaining compatibility with web browsers and mobile operating systems.
4. OAuth & Authentication Flows
OAuth 2.0 and other authentication protocols use URL encoding extensively for redirect URIs, authorization codes, and state parameters. Proper encoding prevents security vulnerabilities and ensures that authentication flows work correctly across different platforms and browsers.
Examples & Pitfalls
✓ Correct Encoding Examples
Simple text with spaces:
Input: "Hello World"
Output: "Hello%20World"Special characters:
Input: "[email protected]"
Output: "user%40example.com"International characters:
Input: "Café 北京"
Output: "Caf%C3%A9%20%E5%8C%97%E4%BA%AC"✗ Common Pitfalls
Double encoding:
Input: "Hello%20World"
Result: "Hello%2520World" (wrong!)❌ Don't encode already encoded URLs
Encoding entire URLs:
Input: "https://example.com/path"
Should encode only: "path" part❌ Don't encode protocol, domain, or path separators
Mixing encode/decode:
Input: "%ZZ" (invalid hex)
Error: URIError: URI malformed❌ Invalid hex sequences cause errors
Privacy & Security
This URL encoder/decoder operates entirely within your browser using client-side JavaScript. No data is transmitted to external servers, ensuring complete privacy for your encoded or decoded URLs. All encoding and decoding operations occur in your browser's JavaScript engine, making it safe for processing sensitive URLs, API endpoints, or query parameters containing user data.
However, URL encoding provides no security benefits and should not be used to protect sensitive information. URL encoding is easily reversible and provides only character escaping, not encryption or data protection. For secure transmission of sensitive data in URLs, always use HTTPS encryption at the transport level and consider additional security measures like tokenization or proper authentication mechanisms.
Be cautious when encoding URLs that contain sensitive information like session tokens, API keys, or personal data. While the encoding itself is safe, the encoded URLs may still be logged in browser history, server logs, or proxy caches. For highly sensitive data, consider using POST requests instead of URL parameters, or implement proper session management and authentication systems that don't expose sensitive data in URLs.