How to Use URL Encoder / Decoder
Follow these three steps to process, validate, and export your data locally inside your browser with zero server latency:
Select Encode or Decode and choose Component mode (`encodeURIComponent`) or Full URI mode (`encodeURI`).
Paste your text or URL string into the input box.
Copy the encoded or decoded output immediately.
The Mechanics of Percent-Encoding: RFC 3986 Standard vs RFC 1738 Legacy
Uniform Resource Identifiers (URIs) are governed by strict ASCII syntax boundaries defined in IETF RFC 3986. Characters permitted inside a URL are divided into two strict sets: unreserved characters (alphanumerics plus -, _, ., and ~) and reserved delimiters (such as /, ?, &, =, and #) that define the structural hierarchy of a URL. Any character outside the unreserved set—including spaces, non-ASCII UTF-8 characters, emojis, and punctuation—must undergo percent-encoding when placed inside a query parameter or path segment.
Percent-encoding serializes a character by first converting it into its UTF-8 byte sequence and then representing each byte as a percent sign (%) followed by two uppercase hexadecimal digits. A single-byte ASCII ampersand (&, hex 0x26) becomes %26, while a 4-byte UTF-8 emoji such as 🚀 (U+1F680) is serialized into the 4-byte sequence %F0%9F%9A%80.
The Space Dilemma: %20 versus the Plus Sign (+)
One of the most frequent bugs in web APIs is whether spaces should be encoded as %20 or +. RFC 3986 requires spaces inside URL paths and REST parameters to be encoded as %20. The + convention originates from the legacy HTML application/x-www-form-urlencoded MIME specification, where spaces become + and literal plus signs must be escaped as %2B. Our tool lets you toggle both modes cleanly.
Comprehensive Encoding Comparison Matrix Across Delimiters
Compare how standard JavaScript URI functions and HTML specifications handle reserved URL delimiters and special characters:
| Character | Hex Byte | encodeURI() | encodeURIComponent() | Form (+ Mode) | Role in URL |
|---|---|---|---|---|---|
| & (Ampersand) | 0x26 | & (Preserved) | %26 | %26 | Separates query string key-value pairs |
| / (Forward Slash) | 0x2F | / (Preserved) | %2F | %2F | Separates hierarchical URL path segments |
| ? (Question Mark) | 0x3F | ? (Preserved) | %3F | %3F | Begins the URL query string section |
| = (Equals Sign) | 0x3D | = (Preserved) | %3D | %3D | Binds query parameter key to its value |
| # (Hash / Fragment) | 0x23 | # (Preserved) | %23 | %23 | Starts client-side document fragment identifier |
| Space (Whitespace) | 0x20 | %20 | %20 | + | Must always be escaped in valid URIs |
| + (Plus Sign) | 0x2B | + (Preserved) | %2B | %2B | Often decoded as space by legacy form parsers |
Common URL Encoding Pitfalls & Defensive Engineering
Avoid broken redirect URLs, parameter injection, and URIError exceptions in production applications:
1. Never Pass a Full URL into encodeURIComponent()
Routing BugCalling encodeURIComponent() on a complete URL escapes https:// into https%3A%2F%2F, breaking browser navigation. Encode only individual query parameter values.
const url = `https://example.com/search?q=${encodeURIComponent(query)}`;2. Guard Against Double-Encoding (%2520)
Data CorruptionEncoding an already percent-encoded string turns the % in %20 into %25, producing %2520. Always keep raw strings in state and encode once at serialization time.
Raw: "a b" -> 1st pass: "a%20b" -> 2nd pass: "a%2520b"3. Wrap decodeURIComponent() in try/catch
Crash PreventionA stray % sign not followed by two valid hex digits (such as "100% organic") causes decodeURIComponent() to throw a synchronous URIError exception.
Malformed: "100% local" -> Throws URIError: URI malformed4. Prevent Open Redirect & Parameter Smuggling
OWASP SecurityWhen passing a returnUrl or callback parameter in OAuth flows, always use Component mode so embedded & and # characters cannot inject extra query parameters.
?redirect=https%3A%2F%2Fapp.com%2Fcallback%3Fauth%3D1Practical Examples & Input/Output Reference
Encoding a query parameter containing reserved characters
Using component mode so `&`, `=`, and spaces do not break a URL query string.
Sample Input
q=fish & chips (100% fresh)Expected Output
q%3Dfish%20%26%20chips%20(100%25%20fresh)Frequently Asked Questions
What is the difference between Component mode and Full URI mode?
Component mode (`encodeURIComponent`) encodes reserved URL delimiters like `/`, `?`, `&`, and `=`, making it ideal for individual query parameter values. Full URI mode (`encodeURI`) preserves valid URL structure characters.