URL Encode Online
Encode URLs and text using percent encoding
๐ How to Use
- Paste your URL or text in the input field
- The encoded result appears automatically with special characters converted to percent-encoded format
- Click "Load Example" to see a sample URL encoding
- Click "Copy" to copy the encoded result to your clipboard
- Use "Switch Mode" to decode the output back to plain text
- Click "Clear" to reset both fields
About the URL Encoder
The URL Encoder is a free, browser-based tool that instantly converts special characters in URLs and query parameters to percent-encoded format. URL encoding is essential for web development, API integration, and data transmission, ensuring that URLs remain valid and functional across all systems and browsers. Whether you're building search functionality, creating shareable links with parameters, or debugging API requests, this tool provides real-time encoding with complete privacy since all processing happens locally in your browser.
Key Features:
- Real-time URL encoding as you type with instant results
- 100% client-side processing - your data never leaves your browser
- No registration, login, or installation required
- Handles all special characters and international text (UTF-8)
- Switch between encode and decode modes seamlessly
- Mobile-friendly responsive interface for encoding on any device
Common Use Cases:
- Search Queries: Encode user search terms with spaces and special characters for URL query parameters (e.g., ?q=hello+world)
- API Requests: Encode parameter values for REST API calls to ensure proper data transmission
- Shareable Links: Create URLs with encoded parameters for social sharing, email links, and deep linking
- Form Submissions: Encode form data for GET requests with query strings containing user input
- Redirect URLs: Encode destination URLs in redirect parameters (also check our URL Decoder for the reverse process)
URL Encoding Examples & Implementation Patterns
Query Parameter Encoding
// Original query:
https://example.com/search?q=hello world&category=tech news
// Properly encoded:
https://example.com/search?q=hello%20world&category=tech%20news
// JavaScript:
const searchTerm = 'hello world';
const encoded = encodeURIComponent(searchTerm);
const url = `https://example.com/search?q=${encoded}`;
// Result: https://example.com/search?q=hello%20world Use case: Encode search queries and form parameters to ensure valid URLs
Special Characters in URLs
// Characters that need encoding:
Original: [email protected]
Encoded: user%40example.com
Original: C++ Programming
Encoded: C%2B%2B%20Programming
Original: 50% discount!
Encoded: 50%25%20discount%21
// JavaScript encoding:
encodeURIComponent('[email protected]') // "user%40example.com"
encodeURIComponent('50% off!') // "50%25%20off%21" Use case: Handle special characters in usernames, titles, or content
International Characters (UTF-8)
// Non-ASCII characters:
Original: Cafรฉ Renรฉ
Encoded: Caf%C3%A9%20Ren%C3%A9
Original: ๆฅๆฌ่ช (Japanese)
Encoded: %E6%97%A5%E6%9C%AC%E8%AA%9E
Original: Hello ๐ World
Encoded: Hello%20%F0%9F%91%8B%20World
// JavaScript handles UTF-8 automatically:
encodeURIComponent('Cafรฉ') // "Caf%C3%A9" Use case: Support international users with non-English characters and รฉmojis
Redirect URL Parameters
// Login redirect pattern:
const returnUrl = 'https://example.com/dashboard?tab=settings';
const encodedReturn = encodeURIComponent(returnUrl);
const loginUrl = `https://auth.example.com/login?redirect=${encodedReturn}`;
// Result:
https://auth.example.com/login?redirect=https%3A%2F%2Fexample.com%2Fdashboard%3Ftab%3Dsettings
// Decode after login:
const redirect = new URLSearchParams(window.location.search).get('redirect');
window.location.href = decodeURIComponent(redirect); Use case: Safely pass full URLs as query parameters for OAuth or authentication flows
API Request with Query Strings
// Building API URLs with parameters:
const baseUrl = 'https://api.example.com/search';
const params = {
query: 'machine learning & AI',
category: 'tech/software',
date: '2024-01-01'
};
// Build query string:
const queryString = Object.entries(params)
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
.join('&');
const fullUrl = `${baseUrl}?${queryString}`;
// Result: ...?query=machine%20learning%20%26%20AI&category=tech%2Fsoftware&date=2024-01-01 Use case: Build API request URLs programmatically with proper encoding
Shareable Social Media Links
// Twitter share URL:
const text = 'Check out this article: "AI & Machine Learning"';
const url = 'https://example.com/article?id=123';
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
// Facebook share URL:
const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
// LinkedIn share:
const title = 'Amazing Article!';
const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
Use case: Create social media sharing links with pre-filled content
โ Frequently Asked Questions
What is URL encoding and why is it necessary?
URL encoding (also called percent-encoding or URI encoding) converts special characters in URLs to a format safe for transmission over the internet. It's necessary because URLs can only contain certain ASCII characters. Special characters like spaces, &, ?, #, and non-English characters must be encoded to prevent breaking the URL structure or causing server-side errors. For example, a space becomes %20, and & becomes %26.
How do I encode a URL with this tool?
Simply paste or type your URL or text into the input field, and the tool automatically encodes it in real-time. Special characters are converted to percent-encoded format (e.g., space becomes %20, ! becomes %21). Click the copy button to copy the encoded result to your clipboard. The tool handles all standard URL encoding rules automatically.
What characters need URL encoding?
Characters that need encoding include: spaces, quotes (' and "), <, >, #, %, {, }, |, \, ^, ~, [, ], `, and non-ASCII characters (รฉmojis, accented letters). Reserved characters (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =) may also need encoding depending on context. Safe characters that don't need encoding are A-Z, a-z, 0-9, -, _, ., and ~.
When should I use URL encoding?
Use URL encoding for: query string parameters (e.g., ?search=hello world), form data submissions, API request parameters, file names in URLs, user-generated content in URLs, email addresses with special characters, and any text that will be part of a URL. Always encode user input before adding it to URLs to prevent broken links and security issues.
What's the difference between URL encoding and Base64 encoding?
URL encoding preserves text readability and only encodes special characters (selective encoding), while Base64 encodes all data into a completely different format. URL encoding is specifically designed for URLs and keeps most characters readable (e.g., "hello world" โ "hello%20world"), while Base64 transforms everything (e.g., "hello world" โ "aGVsbG8gd29ybGQ="). Use URL encoding for URLs and query parameters; use Base64 for data transmission.
Is my data safe when using this URL encoder?
Yes, absolutely! All URL encoding happens entirely in your browser using client-side JavaScript. Your URLs and data never leave your device or get sent to any server. We don't log, store, or track any of your data, making it completely safe to encode even sensitive URLs or query parameters.
Can I encode an entire URL or just query parameters?
You can encode both! For query parameters, encode only the values (the text after =). For example, in ?name=John Doe, encode "John Doe" to get ?name=John%20Doe. If you need to encode an entire URL, make sure to encode only the path and query portions, not the protocol (https://) or domain parts. Most programming languages have functions that handle this automatically.
What is the difference between encodeURI and encodeURIComponent?
In JavaScript, encodeURI() encodes a complete URL but preserves URL structure characters (:/? etc.), while encodeURIComponent() encodes all special characters including those. Use encodeURI() for entire URLs and encodeURIComponent() for query parameter values. For example, encodeURIComponent("a&b") gives "a%26b", but encodeURI("a&b") leaves & unencoded, which could break query strings.