URL Encoder/Decoder

URL Encoder/Decoder - Encode and Decode URLs Online

A powerful online URL encoder and decoder tool that helps you encode text for safe use in URLs or decode percent-encoded URL strings back to plain text. Features automatic handling of special characters, spaces, Unicode, and various encoding options. Essential for web developers working with query parameters, API endpoints, form data, and URL manipulation.

What is URL encoding?

URL encoding (also called percent-encoding) is a method to encode special characters in URLs using the % symbol followed by two hexadecimal digits. It's necessary because URLs can only contain a limited set of ASCII characters.

Why URL encoding is needed:
- URLs can only safely transmit certain ASCII characters (A-Z, a-z, 0-9, and a few special chars)
- Special characters like spaces, &, ?, =, #, / have special meanings in URLs
- Non-ASCII characters (Unicode, emoji, accented letters) need to be encoded
- Prevents URL parsing errors and data corruption

Common encodings:
- Space → %20 (or + in query strings)
- & → %26
- = → %3D
- ? → %3F
- # → %23
- / → %2F
- @ → %40
- Unicode: é → %C3%A9

URL encoding is standardized in RFC 3986 and is essential for:
- Query string parameters
- Form data submission
- API requests
- Dynamic URL generation
- Search engine URLs

How do I encode a URL?

Encoding a URL or text for use in URLs is simple:

1. Select the 'Encode' mode (default)
2. Enter or paste your text or URL in the input field
3. Choose your encoding options:
- 'Encode spaces as %20': Converts spaces to %20 (recommended)
- 'Encode special characters': Encodes all unsafe characters (recommended)
4. Click the 'Encode' button
5. Your URL-encoded text appears in the output field

Example 1 - Simple text:
Input: "Hello World!"
Output: "Hello%20World%21"

Example 2 - URL with parameters:
Input: "https://example.com/search?q=hello world&lang=en"
Output: "https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den"

Example 3 - Special characters:
Input: "name=John Doe & age=30"
Output: "name%3DJohn%20Doe%20%26%20age%3D30"

Note: If you're only encoding query parameter values (not the entire URL), you typically only need to encode the value part, not the = or & separators.

How do I decode a URL?

Decoding a percent-encoded URL back to readable text is straightforward:

1. Select the 'Decode' mode
2. Paste your URL-encoded string in the input field
3. Click the 'Decode' button
4. The decoded, human-readable text appears in the output

Example 1 - Encoded text:
Input: "Hello%20World%21"
Output: "Hello World!"

Example 2 - Query parameters:
Input: "q%3Dhello%20world%26lang%3Den"
Output: "q=hello world&lang=en"

Example 3 - Full URL:
Input: "https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world"
Output: "https://example.com/search?q=hello world"

The tool automatically:
- Handles both %20 and + as space characters
- Decodes all percent-encoded characters
- Supports Unicode and international characters
- Shows clear error messages for invalid encoding
- Preserves URL structure and formatting

What's the difference between encodeURI and encodeURIComponent?

This tool uses encodeURIComponent logic, which is the most common and safest option. Here's the difference:

encodeURIComponent (Used by this tool):
- Encodes ALL special characters except: A-Z a-z 0-9 - _ . ! ~ * ' ( )
- Encodes: / ? : @ & = + $ # , and spaces
- Use for: Query parameter values, form data, path segments
- Example: "hello world" → "hello%20world"
- Example: "a&b=c" → "a%26b%3Dc"

encodeURI (Not used here):
- Encodes fewer characters
- DOES NOT encode: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
- Use for: Encoding complete URLs while preserving URL structure
- Example: "https://example.com/path?q=hello world" → "https://example.com/path?q=hello%20world"

When to use which:

Use encodeURIComponent (this tool) for:
- Individual query parameter values
- Form field data
- Any user input going into URLs
- API request parameters
- Search queries

Use encodeURI for:
- Complete URLs that need only spaces and Unicode encoded
- When you want to preserve URL structure (://?&#)

Most web development uses encodeURIComponent for safety, which is what this tool provides.

Why are spaces encoded as %20?

Spaces are encoded as %20 (or sometimes +) in URLs because:

1. URL Specification:
- RFC 3986 defines valid URL characters
- Space is not a valid character in URLs
- Must be percent-encoded for safe transmission

2. Two encoding methods for spaces:

%20 (Percent encoding):
- Standard URL encoding
- Works everywhere in URLs
- Used in path segments and modern query strings
- More explicit and safer
- Example: /path%20to/file

+ (Plus sign):
- Legacy encoding for query strings only
- application/x-www-form-urlencoded format
- Common in HTML forms
- Not valid in URL paths
- Example: ?search=hello+world

3. Why %20 is preferred:
- Works in all parts of URLs (path, query, fragment)
- Unambiguous (+ could be a literal plus sign)
- Modern standard
- More consistent

Example:
URL path: /documents/my%20file.pdf ✓
URL path: /documents/my+file.pdf ✗ (+ not decoded in paths)

Query string: ?q=hello%20world ✓
Query string: ?q=hello+world ✓ (but ambiguous)

This tool uses %20 by default for maximum compatibility, but can decode both %20 and + when decoding.

What characters need to be URL encoded?

Characters that need URL encoding fall into several categories:

1. Reserved Characters (have special meaning in URLs):
: / ? # [ ] @ ! $ & ' ( ) * + , ; =
These MUST be encoded when used as data (not as delimiters)

2. Unsafe Characters:
Space → %20
" → %22
< → %3C
> → %3E
% → %25 (must always be encoded)
{ → %7B
} → %7D
| → %7C
\ → %5C
^ → %5E
~ → %7E
[ → %5B
] → %5D
` → %60

3. Non-ASCII Characters:
All characters outside basic ASCII (codes 0-127)
Examples:
- Accented: é → %C3%A9, ñ → %C3%B1
- Chinese: 你好 → %E4%BD%A0%E5%A5%BD
- Emoji: 😀 → %F0%9F%98%80

4. Control Characters:
Characters 0-31 and 127 (non-printable)
Should always be encoded

5. Safe Characters (never need encoding):
A-Z a-z 0-9 - _ . ~ (unreserved characters)

Practical examples:

Original: "search=hello world&lang=en"
Encoded: "search%3Dhello%20world%26lang%3Den"

Original: "[email protected]"
Encoded: "user%40example.com"

Original: "100% accurate!"
Encoded: "100%25%20accurate%21"

When in doubt, encode it! Over-encoding is safer than under-encoding.

What's the difference between URL encoding and HTML encoding?

URL encoding and HTML encoding serve different purposes and use different formats:

URL Encoding (Percent-Encoding):
- Format: %XX (percent + 2 hex digits)
- Purpose: Make text safe for URLs
- Example: "hello world" → "hello%20world"
- Example: "&" → "%26"
- Used in: URLs, query strings, API parameters
- Standard: RFC 3986

HTML Encoding (HTML Entities):
- Format: &name; or &#number;
- Purpose: Display special chars in HTML
- Example: "hello world" → "hello world" (no change)
- Example: "&" → "&amp;" or "&#38;"
- Example: "<" → "&lt;" or "&#60;"
- Used in: HTML content, attributes
- Standard: HTML specification

Key differences:

1. When to use:
- URL encoding: Putting data in URLs
- HTML encoding: Displaying text in web pages

2. What they encode:
- URL encoding: Spaces, special chars, non-ASCII
- HTML encoding: <, >, &, ", and quotes

3. Format:
- URL: %20, %26, %3D
- HTML: &nbsp;, &amp;, &quot;

4. Context:
- URL: Address bar, API calls, links
- HTML: Page content, preventing XSS attacks

Example showing both:
Original: "Search: <hello & goodbye>"
URL encoded: "Search%3A%20%3Chello%20%26%20goodbye%3E"
HTML encoded: "Search: &lt;hello &amp; goodbye&gt;"

Don't confuse them! Using the wrong encoding type can cause:
- Broken URLs or links
- Display issues in web pages
- Security vulnerabilities (XSS)
- Data corruption

Is my data safe when using this tool?

Yes, your data is completely safe and private:

Privacy features:
- 100% client-side processing: All encoding/decoding happens in your browser
- No server uploads: Your data never leaves your computer
- No storage: We don't store, log, or save any data you input
- No tracking: We don't track what you encode or decode
- Works offline: Once loaded, works without internet connection
- Open source: Code is transparent and verifiable

You can verify:
- Open browser DevTools → Network tab (no requests sent)
- Disconnect internet after loading (still works)
- Review page source code

Security notes:
- URL encoding is NOT encryption or security
- Encoded URLs can be easily decoded by anyone
- Don't rely on URL encoding to protect sensitive data
- Passwords, API keys, tokens should use proper security (HTTPS, encryption)

URL encoding is for:
- Data format compatibility ✓
- Preventing parsing errors ✓
- Safe URL transmission ✓

NOT for:
- Hiding sensitive information ✗
- Security or protection ✗
- Encryption ✗

The tool is safe to use, but remember that URL-encoded data is not secure data.

Common URL encoding use cases?

URL encoding is essential in many web development scenarios:

1. Query String Parameters:
- Search queries: ?q=hello%20world
- Filter values: ?category=books%20%26%20media
- Pagination: ?page=1&sort=name%20asc
- Multiple values: ?tags=javascript%2Cnode.js

2. API Requests:
- GET parameters: /api/users?email=user%40example.com
- Search endpoints: /search?term=how%20to%20code
- Filter parameters: /products?name=T-Shirt%20%28Blue%29

3. Form Submissions:
- POST data in application/x-www-form-urlencoded
- Hidden form fields with special characters
- File upload paths with spaces

4. Dynamic URL Generation:
- Building URLs in JavaScript
- Creating shareable links
- Social media share URLs
- Email links with pre-filled content

5. OAuth and Authentication:
- Redirect URLs: redirect_uri=https%3A%2F%2Fexample.com
- State parameters with JSON data
- Token values in URLs

6. Analytics and Tracking:
- UTM parameters: utm_source=email%20campaign
- Custom event names
- User identifiers

7. Internationalization:
- URLs with non-English characters
- Chinese: 你好 → %E4%BD%A0%E5%A5%BD
- Arabic, Hebrew, Cyrillic text
- Emoji in URLs

8. File Paths and Names:
- Spaces in filenames: my%20document.pdf
- Special characters in paths
- Cloud storage URLs

9. Email Links:
- mailto: links with subject/body
- Pre-filled email content
- Special characters in addresses

10. Debugging:
- Examining API responses
- Understanding redirects
- Analyzing server logs
- Testing URL handling

Practical example:
```
Building a search URL:
Base: https://example.com/search
Query: "coffee & tea"
Category: "drinks/hot"
Result: https://example.com/search?q=coffee%20%26%20tea&cat=drinks%2Fhot
```

Key Features

• Encode text to URL-safe percent-encoded format
• Decode percent-encoded URLs back to original text
• Automatic handling of special characters (& = ? # / @ etc.)
• Space encoding options (%20 or +)
• Support for Unicode and international characters
• Handles emoji and multi-byte characters
• One-click swap between encode and decode modes
• Real-time size comparison statistics
• Copy encoded/decoded text to clipboard
• Download results as text files
• Upload text files for encoding/decoding
• Dark mode support
• 100% client-side processing - your data never leaves your browser
• No file size limits
• Works offline after initial load
• Mobile-friendly responsive design
• Clear error messages for invalid input
• No registration or login required