Encode URLs for safe transmission or decode them to view original content
Founder & CEO, Toolraxy
Faiq Ur Rahman is a web designer, digital product developer, and founder of Toolraxy, a growing platform of web-based calculators and utility tools. He specializes in building structured, user-friendly tools focused on health, finance, productivity, and everyday problem-solving.
User Ratings:
ADVERTISEMENT
ADVERTISEMENT
URL Encoder & Decoder is a web utility that converts text into a format safe for URLs and reverses the process. When you include special characters like spaces, ampersands (&), or question marks (?) in a URL, they can break the link or cause errors. URL encoding replaces these characters with a percent sign (%) followed by two hexadecimal digits.
For example:
Space becomes %20
Ampersand (&) becomes %26
Question mark (?) becomes %3F
The tool provides two encoding methods and two decoding methods, giving you full control over how your URLs are processed.
URLs are the foundation of the web, yet they have strict character limitations. When you build dynamic URLs—whether for search queries, API calls, or campaign tracking—you inevitably encounter characters that aren’t URL-safe.
Without proper encoding:
Spaces break links into multiple parts
Ampersands get interpreted as parameter separators
Special characters like #, %, and @ cause parsing errors
Non-ASCII characters (é, ñ, 中文) display incorrectly or fail entirely
Manual encoding is error-prone and time-consuming. This tool handles it instantly, with clear visual feedback and both encoding standards at your fingertips.
Click URL Encoder to convert plain text into percent-encoded format, or URL Decoder to convert encoded strings back to readable text.
For encoding: Paste the text or URL you need to encode into the top textarea
For decoding: Paste the percent-encoded string into the decoder textarea
Full Encoding (encodeURIComponent): Use when encoding data for query string parameters. This encodes EVERYTHING except letters, numbers, and a few safe characters.
URL Encoding (encodeURI): Use when encoding a complete URL. This preserves protocol (http://), domain slashes, and query structure while encoding unsafe characters.
For decoding, match the method to how the string was encoded:
decodeURIComponent: Use for strings encoded with encodeURIComponent
decodeURI: Use for strings encoded with encodeURI
Press the Process button or use Ctrl+Enter (Cmd+Enter on Mac). Your result appears instantly in the result box.
Click Copy to save the result to your clipboard. Use Clear All to start over, or Swap to move encoded/decoded content between tabs.
URL encoding replaces unsafe ASCII characters with a percent sign followed by two hexadecimal digits representing the character’s byte value.
The technical process:
Character Analysis – The tool examines each character in your input string.
Safe Character Preservation – Characters that are safe for URLs (A-Z, a-z, 0-9, and -_.!~*'()) remain unchanged when using encodeURIComponent.
Unsafe Character Conversion – Unsafe characters are converted to their UTF-8 byte representation, then each byte is expressed as %XX where XX is the hexadecimal value.
Method Differentiation:
encodeURIComponent encodes ALL unsafe characters, including /, ?, &, and =
encodeURI encodes most characters but leaves ://, /?, &#, and = intact to maintain URL structure
Decoding – The process reverses: %20 becomes space, %3F becomes ?, etc. The tool validates each percent sequence and throws errors for malformed encoding.
Scenario: You’re building a search link for an e-commerce site that includes user-entered filters.
Your raw parameters:
Category: “Men’s Shoes”
Color: “Blue & Gray”
Price: “$50-$100”
Query: “size 10”
Raw URL attempt (breaks immediately):
https://store.com/search?cat=Men's Shoes&color=Blue & Gray&price=$50-$100&q=size 10
Problems:
Spaces break the URL
Apostrophe (‘) is unsafe
Ampersand (&) gets interpreted as a new parameter
Dollar sign ($) has special meaning
Using the URL Encoder:
Paste the query string portion: Men's Shoes&Blue & Gray&$50-$100&size 10
Select Full Encoding (encodeURIComponent)
Click Process
Result:
Final working URL:
The URL now transmits safely, and the server correctly receives each parameter.
Dual Encoding Methods – Choose between encodeURI and encodeURIComponent based on your specific need
Instant Results – No page reloads, no waiting
Character Counter – Know exactly how long your strings are
Swap Function – Move between encoder and decoder with one click
Keyboard Shortcuts – Ctrl+Enter to process, Ctrl+E for examples
Error Detection – Invalid percent-encoding is caught and explained
Validation Feedback – Know whether your decoded result looks like a valid URL
Free & Private – No server storage, all processing happens in your browser
| User Type | How They Benefit |
|---|---|
| Web Developers | Encode API parameters, build dynamic URLs |
| SEO Specialists | Create trackable campaign URLs with correct encoding |
| Digital Marketers | Ensure UTM parameters pass through analytics platforms |
| QA Testers | Validate URL handling in web applications |
| Content Managers | Include special characters in links |
| API Integrators | Prepare data for POST requests and query strings |
| Students | Learn URL encoding through hands-on examples |
Mistake: Using encodeURI on query string parameters
Result: Slashes, ampersands, and equals signs remain unencoded, breaking parameter boundaries
Fix: Use encodeURIComponent for parameter values
Mistake: Encoding an already encoded string
Result: %20 becomes %2520, causing server-side decoding errors
Fix: Only encode raw, unencoded text
Mistake: Showing %20 to users instead of spaces
Result: Poor user experience
Fix: Always decode for human-readable display
Mistake: Using decodeURI on encodeURIComponent output
Result: May work partially but fails on encoded slashes and other characters
Fix: Match the decoding method to the encoding method
Mistake: Encoding extremely long strings (>2000 characters)
Result: Some browsers/servers have URL length limits
Fix: Use POST requests for very long data
No automatic detection – The tool doesn’t know which encoding method was used on a given string; you must select the correct decoder
Browser-based only – All processing happens client-side; very large inputs (>10,000 chars) may cause performance lag
No batch processing – Each string must be processed individually
Unicode handling – Characters outside the Basic Multilingual Plane encode to surrogate pairs, which may behave unexpectedly
No URL validation – The tool encodes/decodes any text but doesn’t verify it’s a valid URL
Percent-encoding, also known as URL encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI). Certain characters are reserved in the URI syntax and must be escaped when used for other purposes. The encoding replaces each unsafe character with a percent sign (%) followed by two hexadecimal digits representing the character’s ASCII code (or UTF-8 byte for non-ASCII).
For example, the forward slash (/) is reserved for separating path segments. If you need a slash as data—like in a filename—it must be encoded as %2F. Without encoding, the browser interprets it as a path separator, breaking your URL structure.
Use encodeURI when:
You have a complete URL with protocol, domain, and path
You need to preserve the URL structure (slashes, query separators)
Example: encodeURI
(“https://example.com/path with spaces/page.html”)
Use encodeURIComponent when:
You’re building query string parameters
You’re encoding data that will become part of a URL parameter
You need maximum encoding safety
Example: encodeURIComponent("user input with & special chars!")
Mixing these up is the most common URL encoding mistake. Remember: encodeURI for the URL skeleton, encodeURIComponent for the stuffing.
RFC 3986 defines the standard URI syntax and reserves several characters for specific purposes:
:/?#[]@ – General delimiters
!$&'()*+,;= – Sub-delimiters
When these characters appear in data—not as delimiters—they must be percent-encoded. The ampersand (&) separates query parameters, so if your parameter value contains an ampersand, it must become %26. The equals sign (=) separates parameter names from values, so data containing equals becomes %3D.
The space encoding confusion: Spaces can be encoded as %20 (standard) or + (in application/x-www-form-urlencoded forms). Modern practice prefers %20 for consistency.
The hash problem: The hash (#) marks the fragment identifier. If your data contains #, encode it as %23 or the browser will treat everything after it as an anchor link.
The percent sign dilemma: If your data already contains percent signs (e.g., 100% satisfaction), encoding must handle it carefully. The percent sign itself encodes to %25, so “100% satisfaction” becomes “100%25 satisfaction” after encoding.
Understanding how other languages handle URL encoding helps when debugging cross-platform issues:
JavaScript:
encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()
PHP:
urlencode() (similar to encodeURIComponent), rawurlencode() (RFC 3986 compliant)Python:
urllib.parse.quote() and urllib.parse.quote_plus()C#:
Uri.EscapeDataString() and Uri.EscapeUriString()
Each language has slight variations, but the percent-encoding principle remains consistent across platforms.
When HTML forms submit using GET method, the browser automatically encodes form data using application/x-www-form-urlencoded encoding. This is similar to encodeURIComponent but uses + for spaces (legacy behavior). Modern applications increasingly use %20 for consistency with URL standards.
Understanding this distinction is crucial when manually building form submissions or parsing server logs.
encodeURI is used for encoding complete URLs. It preserves characters that have special meaning in URLs (like ://, /?, &, =). encodeURIComponent is used for encoding individual parameter values. It encodes all special characters, including slashes and ampersands, ensuring they’re treated as data rather than URL structure.
Spaces in URLs should be encoded as %20. Our tool does this automatically when you use either encoding method. For example, “hello world” becomes “hello%20world”.
If you see % symbols after decoding, the string may have been double-encoded, or you’re using the wrong decoding method. Try the other decoding option. If the problem persists, the original string may contain % characters that aren’t part of percent encoding.
Yes. URL encoding supports Unicode characters. Characters like “café” encode to “caf%C3%A9”. The tool handles UTF-8 encoding automatically.
The following characters are safe and don’t require encoding: A-Z a-z 0-9 - _ . ~ ! * ' ( ). All other characters should be encoded when appearing in URLs.
Encoded strings contain percent signs followed by two hexadecimal digits (0-9, A-F). For example, %20 indicates an encoded space. However, this isn’t foolproof—some legitimate text contains percent signs. When in doubt, try decoding; if the result looks readable, it was encoded.
URL length limits vary by browser and server. Internet Explorer limits URLs to 2,048 characters. Most modern browsers support up to 8,000 characters. For very long data, use POST requests instead of GET.
decodeURI reverses encodeURI—it leaves URL structure intact. decodeURIComponent reverses encodeURIComponent and decodes absolutely everything. Using the wrong method can leave some characters encoded or cause errors.
ADVERTISEMENT
ADVERTISEMENT