URL Encoder & Decoder
Encode special characters for safe URL transmission and decode percent-encoded strings. Essential for web development, API testing, and form data handling.
Try These Examples
Understanding URL Encoding (Complete Guide)
URL encoding (percent encoding) converts special characters into a format that can be safely transmitted over the internet. URLs can only contain ASCII characters from a limited set. Any character outside this set must be encoded.
When you see `%20` in a URL, that's a space character encoded. `%2F` is a forward slash, `%3F` is a question mark, and `%26` is an ampersand. URL encoding replaces unsafe characters with a `%` followed by two hexadecimal digits representing the character's ASCII code.
- 🔒 Safe Transmission: URLs with spaces, quotes, or non-ASCII characters break when shared. Encoding ensures universal compatibility.
- 📝 Form Submissions: Browser automatically encodes form data before sending to server (application/x-www-form-urlencoded).
- 🔍 Search Queries: Spaces become `%20` or `+` in search URLs. Special characters in searches must be encoded.
- 🌐 International URLs: Non-ASCII characters (Chinese, Arabic, emojis) become percent-encoded for RFC 3986 compliance.
- 📊 API Parameters: REST APIs require encoded query parameters. JSON or XML in URL parameters must be encoded.
- 🔗 Shareable Links: Email clients and messaging apps handle encoded URLs reliably. Raw URLs with spaces break.
- 🛡️ Security: Prevents injection attacks. User input in URLs must be encoded to prevent malicious characters.
Space: " " → %20 Exclamation: "!" → %21 Question Mark: "?" → %3F Ampersand: "&" → %26 Equals: "=" → %3D Forward Slash: "/" → %2F Colon: ":" → %3A At Symbol: "@" → %40 Hash: "#" → %23
URL Character Encoding Reference
Unreserved characters (A-Z, a-z, 0-9, -, _, ., ~) don't need encoding. All other characters require percent encoding.
encodeURIComponent vs encodeURI: Key Differences
Encodes ALL special characters including / ? & #. Use for encoding query parameter values, form data, and any user input placed in URLs.
encodeURIComponent("hello world?q=test")
→ "hello%20world%3Fq%3Dtest"
When to use: Query parameter values, POST form data, hash fragments, user input in URLs.
Preserves URL structure characters (/ ? & #). Use for encoding entire URLs while keeping them valid.
encodeURI("https://example.com/search?q=hello world")
→ "https://example.com/search?q=hello%20world"
When to use: Full URLs, redirect URLs, href attributes, when you need to keep URL structure intact.
Using `encodeURIComponent()` on a full URL breaks it (encodes / and ?). Using `encodeURI()` on a query parameter value leaves special characters unencoded, causing parsing errors. Choose based on what you're encoding!
12 Costly URL Encoding Mistakes
encodeURIComponent("https://example.com") → "https%3A%2F%2Fexample.com" (broken). Use encodeURI() for full URLs to preserve :// and /.
encodeURI("hello&world") → "hello&world" (ampersand unencoded). Use encodeURIComponent() for parameter values to encode &, =, #, ?.
encodeURIComponent("hello%20world") → "hello%2520world" (% becomes %25). Check if data is already encoded before encoding again.
Some systems accept + for spaces (form data), but RFC 3986 requires %20. Use %20 for standard URL encoding, + for application/x-www-form-urlencoded.
A-Z, a-z, 0-9, -, _, ., ~ don't need encoding. Encoding them increases length without benefit. Only encode unsafe characters.
Non-ASCII characters (é, ñ, 😀) need UTF-8 encoding first, then percent encoding. Our tool handles UTF-8 automatically.
Hash in URL fragment (after #) doesn't need encoding. Hash in query parameter value MUST be encoded as %23.
Some APIs expect + for space, others expect %20. Document your encoding standard. Most REST APIs use %20.
Unencoded user input in redirect URLs enables open redirect vulnerabilities. Always encode redirect parameters.
In URL paths, + is literal plus sign. Only in query strings (application/x-www-form-urlencoded) does + represent space. Use %20 for standard URL encoding.
Test encoding with special characters: spaces, ampersands, equals, hashes, non-ASCII, emojis. Each can break if encoded incorrectly.
Real-World URL Encoding Applications
Google search: "https://www.google.com/search?q=url+encoding+tutorial". Spaces become + or %20. Special characters like & become %26.
`mailto:user@example.com?subject=Hello%20World&body=Check%20this%20out` — spaces and special characters in subject/body must be encoded.
Twitter share URL: `https://twitter.com/intent/tweet?text=Check%20this%20out&url=https%3A%2F%2Fexample.com`. Text and URL parameters must be encoded.
`GET /api/search?q=hello%20world&filter=active%3Dtrue` — query parameter values require encodeURIComponent encoding.
Facebook, LinkedIn, Pinterest share URLs require encoded page titles, descriptions, and URLs for clean sharing.
Storing raw user input in URL fields can break applications. Always encode before storage or decode before display.
You Might Also Like These Developer Tools
Frequently Asked Questions About URL Encoding
Encode & Decode URLs Instantly
Free URL encoder/decoder for web developers. Encode special characters and decode percent-encoded strings.