URL Encoder / Decoder

URL Encoder / Decoder percent-encodes or percent-decodes the textarea with the browser’s URI functions. It starts with empty input and output, Encode mode, Encode component on, and Decode plus as space on. There is no file picker. The slash-free labels Encode URL and Decode URL are buttons; they do not fetch the string as a network URL.

The in-page note is accurate: encoding changes how text is written for transmission, not whether it is private. Percent-encoding is not encryption, sanitization, authentication, or a safety check on a destination.

Encode component (default)

encodeURIComponent on encode; decodeURIComponent on decode. Stricter escaping of reserved characters such as &, =, ?, /, :, #, and +.

Encode full URL

encodeURI on encode; decodeURI on decode. Leaves characters that encodeURI treats as URI structure (including : / ? # & = +) unescaped so a complete URL stays readable.

Use component mode for one query value, path segment, or fragment. Use full-URL mode when the paste is already a whole URI and you do not want separators turned into % sequences. The page does not split a URL into scheme, host, and query and encode each part differently; it applies one function to the entire string.

transformInput optionally replaces + with spaces (decode only, if decodePlusAsSpace), then calls one of encodeURIComponent, encodeURI, decodeURIComponent, or decodeURI. Empty or whitespace-only input sets output to empty and shows “Enter text or a URL to continue.” Thrown errors clear output and show a generic decode or encode message; the engine URIError text is not printed.

Until modeTouched is true, handleInputChange sets mode from detectSuggestedMode: Decode if the trim matches /%[0-9A-Fa-f]{2}/, or if the string contains both ? and =; otherwise Encode. Choosing Encode or Decode yourself sets modeTouched, clears output and error, and stops that suggestion. Switching modes does not convert until you click the run button again.

• Spaces: encodeURI and encodeURIComponent write %20. This page never encodes a space as +.
• Plus: in Decode with Decode plus as space on, every + in the whole input becomes a space before decoding. Turn the option off when a literal + must remain. encodeURIComponent encodes + as %2B; encodeURI leaves + unescaped.
• Percent: encoding % produces %25. There is no “already encoded” detector and no double-encoding guard. Decoding a malformed % sequence throws and the UI asks you to check the percent-encoding.
• Unicode: passed through the same browser functions, which percent-encode non-ASCII as UTF-8 byte escapes. There is no charset selector.
• Line breaks: no special case; they are characters in the string the URI function receives (typically %0A / %0D when encoded).

• decodeURI / decodeURIComponent throw: “Unable to decode this value. Check the percent-encoding and try again.” Output is cleared.
• encodeURI / encodeURIComponent throw: “Unable to encode this value.” (uncommon for ordinary text).
• Incomplete escapes such as %2 or invalid hex make the decoder throw. The UI does not repair or partially decode.
• Encoding an already percent-encoded string encodes the % signs again. That is not treated as an error.

1. Click Encode or Decode in the URL mode group. Clicking a mode clears Encoded output / Decoded output and the error, and sets modeTouched so detectSuggestedMode stops changing the mode.
2. Paste into Text or URL to encode, or Encoded URL or query string, depending on mode.
3. Click Encode component (default) or Encode full URL. Those buttons set encodeComponent and may call runTransform in the same click, so that run still sees the previous encodeComponent; click Encode URL or Decode URL after switching if the output does not match the newly selected mode.
4. In Decode, click Decode plus as space if you need to change the default-on + → space replace. The inspector can already reflect the plus option; Encoded output / Decoded output updates only after Decode URL.
5. Click Encode URL or Decode URL. The button stays disabled while the textarea is empty. Empty runTransform sets “Enter text or a URL to continue.”
6. Click Copy output to copy the result textarea via navigator.clipboard.writeText. Failure clears Copied with no red error. The button stays disabled while output is empty.
7. Click Copy on a Query parameter inspector row to write that param’s decodedValue only when it is non-empty. Empty inspector shows “No query parameters detected.”
8. Click Load example to fill ENCODE_EXAMPLE (“hello world & special=chars?x=1”) or DECODE_EXAMPLE (an example.com search URL with %20) and run immediately.
9. Click Clear to restore empty fields, Encode mode, Encode component on, Decode plus as space on, and modeTouched false. Clear is disabled while both boxes are empty.

The main output is not application/x-www-form-urlencoded serialization. It does not join keys with &, does not turn spaces into +, and does not set a Content-Type. Decode plus as space is a global character replace, not a form parser.

The Query parameter inspector is separate: parseQueryParams takes text after the first ? (until #), or the whole string if it contains =. It may replace + with spaces, then new URLSearchParams(normalized). forEach lists keys and decodedValue. analyzeUrl also sets hasProtocol from a scheme:// regex and hasPath from includes(“/”). “Detected query params” is that list’s length. This is not new URL(), not RFC-complete parsing, and not a check that a page exists.

• No URL validation, reachability, redirect following, or “safe to visit” check.
• No automatic double-encoding prevention.
• No file import, result download, or configured character cap (very large pastes are still limited by the browser).
• No query builder that re-encodes each parameter separately into a new URL.
• No Base64, JWT, or regex engine on this page.

A successful encode or decode does not prove the string is a valid URL, is sanitized, is authenticated, or is safe to open.

UrlEncode.jsx calls encodeURI, encodeURIComponent, decodeURI, decodeURIComponent, and URLSearchParams in the browser. It does not call trackToolEvent and does not POST the textarea to an encoding API. That is not a confidentiality guarantee: the rest of the page can still load site assets and advertising; the privacy policy describes first-party analytics for event metadata (not designed to store tool contents); clipboard, extensions, and shared devices remain outside this file.

Do not paste production secrets, session tokens, or customer URLs you would not put on a shared screen. Percent-encoding does not hide them.

• Confirm Encode versus Decode, and component versus full URL, before copying.
• If you toggled Encode full URL, Encode component, or Decode plus as space, run Encode URL / Decode URL again so output matches the options you see.
• If + became spaces, check Decode plus as space; turn it off for literal pluses.
• If separators vanished into % sequences, you probably used component mode on a whole URI.
• Treat sidebar query rows as a URLSearchParams sketch, not as proof the destination is valid.
• Do not encode an already encoded value unless you intend %25.

• Base64 Encoder/Decoder — when you need btoa/atob text, not percent-encoding. The alphabets are not interchangeable.
• Text Diff Checker — to compare the original paste with encoded or decoded output line by line. This page does not diff.
• JSON Formatter — when a copied query value is JSON text. This encoder does not parse JSON.
• Regex Tester — when you need JavaScript RegExp matches against sample text, not URI encoding.