Loading...
encodeURIComponent() - Encodes all special characters (recommended for query parameters)
encodeURIComponent()
Use for query parameters, form data, or any user input that will be part of a URL. Encodes all special characters including : / ? # & =
encodeURI()
Use for encoding complete URLs. Preserves URL structure characters like : / ? # & = but encodes spaces and other special characters.
Full Encoding
Custom method that encodes everything except alphanumeric and -_.~ characters. Useful for maximum compatibility.
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 sequences consisting of a percent sign (%) followed by two hexadecimal digits. This encoding is necessary because URLs can only contain a limited set of characters from the ASCII character set.
Each character that needs encoding is converted to its UTF-8 byte representation, then each byte is represented as %XX where XX is the hexadecimal value. For example, a space character becomes %20.
URLs can only contain certain characters. Special characters must be encoded for proper transmission
Prevents injection attacks and ensures user input doesn't break URL structure
Allows Unicode characters, emoji, and international scripts in URLs safely
This is the most commonly used encoding method. It encodes all characters except: A-Z a-z 0-9 - _ . ! ~ * ' ( )
Example:
Input: "name=John Doe&email=john@example.com"Output: "name%3DJohn%20Doe%26email%3Djohn%40example.com"Use for: Query parameters, form data, path segments, or any user input that will be part of a URL. It encodes special URL characters like : / ? # & =
Designed for encoding complete URLs. It preserves URL structure characters: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
Example:
Input: "https://example.com/search?q=hello world"Output: "https://example.com/search?q=hello%20world"Use for: Encoding complete URLs while maintaining their structure. Only encodes characters that are not allowed in URLs.
Custom method that encodes everything except: A-Z a-z 0-9 - _ . ~
Example:
Input: "Hello World!"Output: "Hello%20World%21"Use for: Maximum compatibility when you need to ensure all special characters are encoded, or when dealing with legacy systems.
When passing data in URL query strings for API requests, always use encodeURIComponent() to ensure special characters don't break the URL structure.
const searchQuery = "coffee & tea";
const url = `https://api.example.com/search?q=$encodeURIComponent(searchQuery)`;When submitting form data via URL (GET requests), encode each parameter value to handle spaces and special characters.
const name = "John Doe";
const email = "john@example.com";
const formData = `name=$encodeURIComponent(name)&email=$encodeURIComponent(email)`;When encoding a complete URL with special characters in the path, use encodeURI() to preserve URL structure.
const url = "https://example.com/path with spaces/file.html";
const encoded = encodeURI(url);Handling Unicode characters, emoji, and international scripts in URLs requires proper UTF-8 encoding.
const text = "你好世界 🌍";
const encoded = encodeURIComponent(text);
| Character | Encoded | Description |
|---|---|---|
| Space | %20 | Most common encoded character |
| ! | %21 | Exclamation mark |
| # | %23 | Hash/Fragment identifier |
| $ | %24 | Dollar sign |
| % | %25 | Percent (encoding indicator) |
| & | %26 | Ampersand (parameter separator) |
| + | %2B | Plus sign |
| / | %2F | Forward slash (path separator) |
| : | %3A | Colon (protocol separator) |
| = | %3D | Equals (key-value separator) |
| ? | %3F | Question mark (query start) |
| @ | %40 | At symbol |
Important Security Notice
URL encoding is NOT encryption or a security mechanism. It's simply a way to make special characters safe for URLs. Always validate and sanitize user input on the server side, even after encoding.
Never trust user input to be URL-safe. Always encode before including in URLs
Use encodeURIComponent() for parameters and encodeURI() for complete URLs
Always decode URL parameters on the server side before using them
Implement try-catch blocks when decoding URLs to handle malformed input
Encoding already encoded strings causes %20 to become %2520
Using encodeURI() for query parameters can break URL structure
Not validating decoded URLs can lead to security vulnerabilities
Never rely solely on client-side encoding for security
Invalid sequences like %2G or incomplete sequences like %2 will cause decoding errors.
❌ Bad: "hello%2Gworld" (G is not a hex digit)
✅ Good: "hello%20world"Encoding already encoded strings can cause issues. Always decode before re-encoding.
❌ Bad: encodeURIComponent("hello%20world") → "hello%2520world"
✅ Good: Decode first, then encode if neededIn query strings, + can represent a space (legacy form encoding) or a literal plus sign.
Modern: Use %20 for spaces
Legacy: + might be interpreted as space in some contextsThis JavaScript error occurs when trying to decode invalid percent-encoded strings.
Solution: Use try-catch blocks and validate input before decodingURL encoding (percent-encoding) converts special characters in URLs to a format that can be transmitted over the internet. URLs can only contain ASCII characters from a limited set. Special characters, spaces, and non-ASCII characters must be encoded using a percent sign (%) followed by two hexadecimal digits. This ensures data integrity, prevents URL structure breaking, and enables international character support in web addresses.
encodeURIComponent() encodes all special characters including URL structure characters (: / ? # & =) and is used for encoding query parameters and form data. encodeURI() preserves URL structure characters and only encodes characters that are not allowed in URLs, making it suitable for encoding complete URLs. For query parameters, always use encodeURIComponent() to prevent breaking URL structure.
Yes! Modern URL encoding supports UTF-8, which means you can encode any Unicode character including emoji, Chinese, Arabic, Cyrillic, and other international scripts. These characters are converted to percent-encoded UTF-8 byte sequences. For example, '你好' becomes '%E4%BD%A0%E5%A5%BD' and '🌍' becomes '%F0%9F%8C%8D'.
Malformed URL errors occur when: 1) Percent signs (%) are not followed by two valid hexadecimal digits (0-9, A-F), 2) Incomplete encoding sequences like %2 instead of %20, 3) Invalid hex characters like %2G, or 4) Double-encoding where already encoded strings are encoded again. Always validate and decode URLs before re-encoding to avoid these issues.
Modern URL encoding uses %20 for spaces. The + sign for spaces is a legacy from application/x-www-form-urlencoded format used in HTML forms. Modern APIs and URLs should use %20 for consistency and clarity. However, some older systems may still interpret + as a space in query strings.
Encode on the client side before sending data to ensure proper transmission over HTTP. Then decode and validate on the server side before processing. Never trust client-side encoding alone for security - always implement server-side validation and sanitization to prevent injection attacks and other security vulnerabilities.
Check if a URL is already encoded by looking for % followed by hex digits. You can try decoding and see if it changes. Avoid double-encoding as it will make %20 become %2520, which is incorrect. If you're unsure, decode first, then re-encode if necessary. Our tool automatically detects and handles both encoded and plain text input.
Encode binary data for URLs and APIs with UTF-8 support
Generate secure hashes (MD5, SHA-1, SHA-256, SHA-512)
Decode and verify JSON Web Tokens instantly
Compare hash values for data integrity verification
Generate salted hashes for password security
Calculate checksums for file integrity verification