What is URL Encoding?
URL encoding (also called percent encoding or URL escaping) is a mechanism for converting characters into a format that can be safely transmitted in URLs. According to RFC 3986, URLs can only contain a limited set of ASCII characters. Any character outside this set—including spaces, special symbols, and non-ASCII characters like emoji or international text—must be encoded. URL encoding replaces these characters with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII or UTF-8 code. For example, a space becomes %20, an ampersand becomes %26, and a Chinese character 你 becomes %E4%BD%A0.
Why Use Our URL Encoder Decoder?
- Secure & Private: All encoding happens in your browser - no data sent to servers
- Bidirectional: Both encode to percent encoding and decode back to original text
- UTF-8 Support: Handles international characters, emoji, and multi-byte encodings
- Query Parameter Safe: Uses encodeURIComponent for maximum compatibility
- Error Handling: Detects malformed encoded strings and provides clear error messages
- Swap Function: Easily move output back to input for chained operations
- Instant Results: Real-time encoding and decoding with one-click copy
Common URL Encoded Characters
Space → %20: Spaces are not allowed in URLs. While forms sometimes use + for spaces, %20 is the standard percent-encoded representation.
! → %21, # → %23, $ → %24, % → %25, & → %26: Special characters used in URLs for delimiters must be encoded when used in parameter values.
= → %3D, ? → %3F, / → %2F, : → %3A: URL structure characters that need encoding in query parameters.
@ → %40, [ → %5B, ] → %5D: Characters often used in email addresses and arrays in URLs.
UTF-8 Characters: Multi-byte characters encode to multiple percent-encoded bytes (e.g., © → %C2%A9, € → %E2%82%AC).
When to Use URL Encoding
- Query Parameters: Encode user input when building search URLs, filter parameters, or API queries
- Form Submissions: URL-encode form data for GET requests with special characters
- OAuth & API Authentication: Encode callback URLs, redirect URIs, and OAuth parameters
- Shareable Links: Create URLs with user-generated content that may contain special characters
- Email Links: Encode email subjects and body text in mailto: links
- SEO & Analytics: Track campaign parameters with spaces or special characters
- Internationalization: Handle non-ASCII characters in URLs for global applications
- Data URLs: Encode data in data: URIs for embedded content
encodeURI vs encodeURIComponent
encodeURI(): Designed for encoding complete URLs. Preserves URL structure characters like :, /, ?, #, and & which are valid in URLs. Use when encoding an entire URL path or full URL string.
Example: encodeURI("https://example.com/search?q=hello world") → "https://example.com/search?q=hello%20world"
encodeURIComponent(): Designed for encoding individual URL components like query parameter values. Encodes ALL special characters including :, /, ?, #, and &. Use for parameter values, form data, and any text that will be part of a URL but shouldn't be interpreted as URL structure.
Example: encodeURIComponent("hello&world") → "hello%26world" (& is encoded)
Our Tool: Uses encodeURIComponent() because it's safer for most use cases—query parameters, form values, and user input. It ensures all special characters are properly encoded.
URL Encoding Best Practices
1. Always encode user input: Never trust user input to be URL-safe. Always encode form values, search queries, and user-generated content before adding to URLs.
2. Use encodeURIComponent for parameters: When building query strings, encode each parameter value individually with encodeURIComponent, not the entire URL.
3. Don't double-encode: Check if text is already encoded before encoding again. Double encoding turns %20 into %2520.
4. Server-side validation: Always decode and validate URL parameters on the server. Don't trust encoded data without verification.
5. Character set consistency: Use UTF-8 encoding consistently across your application to avoid character encoding issues.
6. Test with special cases: Test your encoding with spaces, &, =, #, ?, international characters, and emoji to ensure proper handling.
Common URL Encoding Use Cases
Search Queries: ?q=hello%20world&filter=new (space encoded in search term)
Email Mailto Links: mailto:user@example.com?subject=Hello%20World&body=Check%20this%20out%21
OAuth Redirect URIs: redirect_uri=https%3A%2F%2Fexample.com%2Fcallback (entire URL encoded as parameter value)
Social Media Share Links: ?url=https%3A%2F%2Fexample.com&text=Check%20out%20this%20article%21
API Calls: /api/users?name=John%20Doe&email=john%40example.com (space and @ encoded)
UTM Parameters: ?utm_campaign=Spring%20Sale%202024&utm_source=email (spaces in campaign name)
Decoding URL Encoded Strings
URL decoding reverses the encoding process, converting percent-encoded characters back to their original form. When you paste a percent-encoded string into our decoder, it:
1. Identifies encoded characters: Looks for % followed by two hexadecimal digits (0-9, A-F).
2. Converts to original: Replaces %20 with space, %26 with &, %3D with =, etc.
3. Handles UTF-8: Multi-byte sequences like %E4%BD%A0 are decoded to the corresponding Unicode character (你).
4. Error detection: Malformed sequences like %2 (missing second digit) or %GG (invalid hex) trigger errors.
Common Issues: If decoding fails, check for incomplete percent sequences, invalid hexadecimal characters, or double-encoded strings.
URL Encoding vs Other Encodings
URL Encoding (Percent Encoding): For URLs and query parameters. Uses % + hex. Example: hello world → hello%20world
HTML Entity Encoding: For HTML content to display special characters. Uses &name; or &#number;. Example: < for <, & for &
Base64 Encoding: For binary data in text format. Uses A-Z, a-z, 0-9, +, /. Not for URLs (contains +, /, =).
Form URL Encoding (application/x-www-form-urlencoded): Similar to percent encoding but uses + for spaces instead of %20. Used in HTML form submissions.
JavaScript String Escaping: For JavaScript strings. Uses backslash (\). Example: \" for quotes, \n for newline.
Frequently Asked Questions
Why does my URL have %20 instead of spaces?
Spaces are not valid characters in URLs according to web standards (RFC 3986). They must be encoded as %20 (percent encoding) or + (in form data). %20 is the standard representation used in most contexts.
Can I encode an entire URL?
You can, but usually you should only encode the variable parts (like query parameter values). If you encode an entire URL, characters like :, /, and ? will also be encoded, breaking the URL structure. Use encodeURIComponent() for parameter values, not complete URLs.
What happens if I encode already encoded text?
Double encoding occurs—the % signs get encoded to %25. For example, %20 becomes %2520. This creates invalid URLs. Always check if text is already encoded before encoding again.
How do I encode special characters in JavaScript?
Use encodeURIComponent() for query parameters and individual values: encodeURIComponent("hello&world"). Use encodeURI() only for complete URL paths. Never use escape() which is deprecated.
Why does decoding fail with "malformed URI"?
This error occurs when percent-encoded sequences are incomplete or invalid. Common causes: incomplete sequences like %2 (missing second digit), invalid hex like %GG, or corrupted encoded strings. Verify the encoded text is properly formatted.