URL Encoder & Decoder

Encode special characters for safe URL use, or decode percent-encoded strings back to readable text.

Mode Reference

encodeURIComponent encodes everything except letters, digits, - _ . ! ~ * ' ( ). Use for query parameter values.
encodeURI encodes everything except valid URL characters. Use for full URLs.
Form Data like encodeURIComponent but encodes spaces as + (HTML form submission format).

About This Tool

URL encoding (also called percent-encoding) converts characters that are not allowed in URLs into a %XX format where XX is the hexadecimal ASCII code. This tool supports both encodeURIComponent() (encodes everything except unreserved characters) and encodeURI() (preserves the URL structure). It also decodes percent-encoded strings back to readable text. Commonly used when constructing query parameters, handling form submissions, and working with API requests.

How to Use

  1. Select Encode or Decode mode.
  2. Paste your URL or text into the input field.
  3. Choose between Component encoding (for individual query values) or Full URL encoding (preserves /, ?, &).
  4. The encoded/decoded result appears instantly. Click Copy to copy it.

Common Use Cases

  • Encoding a query parameter that contains an ampersand or space before building a URL by hand. If you are manually assembling a link like ?search=cats & dogs, the unescaped ampersand will be read as a second parameter separator. Encode just the value in Component mode first, then drop the result into the URL template so & becomes %26 and the space becomes %20.
  • Decoding a tracking or redirect link to inspect where it actually goes. Marketing emails and shortened links often wrap the real destination inside a query parameter, for example ?url=https%3A%2F%2Fexample.com. Paste the whole link into Decode mode to reveal the real destination URL before clicking it.
  • Preparing a value for an HTML form submitted with the default encoding type. Standard HTML forms submit as application/x-www-form-urlencoded, which encodes spaces as + rather than %20. Use the Form Data mode when you need to hand-construct a request body that mimics what a browser form would send.
  • Building an API request URL that includes special characters like plus signs or hashes. Email addresses with a + alias tag, or search terms containing #, need component encoding before they can safely sit inside a query string without being misread as a fragment identifier or a space.
  • Checking whether a webhook payload URL is already encoded. Before appending more query parameters to a URL supplied by a third-party integration, decode it first to confirm you are not about to double-encode an already-encoded value.

Percent-Encoding: Reserved vs Unreserved Characters

RFC 3986 splits URL characters into two groups. Unreserved characters, letters, digits, and - _ . ~, never need encoding because they have no special meaning anywhere in a URL. Reserved characters, such as : / ? # [ ] @ ! $ & ' ( ) * + , ; =, are used as delimiters that give a URL its structure (separating the scheme, host, path, query, and fragment). Whether a reserved character needs encoding depends on where it appears: a / is meaningful in the path but must be encoded if it appears literally inside a single path segment or query value. This is exactly the distinction between the two JavaScript functions this tool wraps. encodeURIComponent() encodes nearly all reserved characters because it assumes you are encoding one isolated piece of data, like a single query value, that should not be interpreted as URL structure. encodeURI() leaves the structural reserved characters alone because it assumes you are encoding a complete, already-structured URL and only want to escape genuinely unsafe characters like spaces.

Troubleshooting

  • Double-encoding a URL that was already encoded produces %2520 instead of %20. This happens when an already-encoded %20 gets run through the encoder again, the percent sign itself gets encoded to %25, turning %20 into %2520. Always decode first to check the current state of a string before re-encoding it.
  • Decode throws "Invalid URL-encoded string" / a URI malformed error. This happens when a lone % appears in the input that is not followed by two valid hex digits, often because the string was truncated or a literal percent sign was never encoded to %25 in the first place.
  • A plus sign in the decoded output stayed as a literal + instead of becoming a space. Standard decodeURIComponent() does not treat + as a space, only the form-encoded convention does. Use Form Data mode to decode strings that came from an HTML form submission.
  • Full URL mode does not encode a character you expected it to encode. encodeURI() intentionally leaves structural characters like / ? # : @ & = untouched since encoding them would break the URL's meaning. If you need every one of those characters escaped, encode just the affected segment with Component mode instead.

Frequently Asked Questions

When should I use encodeURIComponent vs encodeURI?

Use encodeURIComponent() when encoding individual query parameter values, it encodes &, =, and +. Use encodeURI() when encoding a full URL, it preserves the structural characters like ://, /, and ?.

Why does a space become %20 or +?

%20 is the standard percent-encoding for space per RFC 3986. The + notation for spaces comes from the older application/x-www-form-urlencoded format used by HTML forms. Both are valid in query strings, %20 is preferred in modern APIs.

Can this decode double-encoded URLs?

Yes, paste a double-encoded string and click Decode twice. Each decode pass removes one layer of encoding. Double encoding is common when URLs are embedded inside other URLs.

Why does my URL still work in a browser even without encoding special characters?

Modern browsers are lenient and will auto-encode obviously unsafe characters like spaces when you paste a URL into the address bar. This tolerance does not extend to server-side code, API clients, or command-line tools, which is why properly encoding a URL before using it programmatically still matters.

Does encoding change the meaning of my query string parameters?

No. Percent-encoding is fully reversible and does not alter the data, it only changes how the characters are represented so they can travel safely inside a URL. A correctly implemented server decodes the value back to the exact original string before using it.