URL encode, decode and parse

Percent-encoding both ways, plus a query string breakdown.

Mode

How to encode or decode a URL

  1. Choose a mode

    Encode percent-encodes text, Decode turns %XX escapes back into characters, and Parse URL breaks a full address into its parts. Press Sample to load an example for the current mode.

  2. Pick the style

    Component encodes everything except letters, digits and - _ . ! ~ * ' ( ) and suits a single query value. Whole URL keeps : / ? # & = so a complete address stays a link. Form data writes spaces as + the way HTML forms do.

  3. Copy the result

    The output updates as you type. Press Copy, or Ctrl+C (Cmd+C on Mac) with nothing selected. In Parse URL each part has its own copy button and Ctrl+C copies the normalised URL.

Good to know

  • Use Component for values you put into a query string. Use Whole URL only when you already have a complete address with a scheme and path.
  • Form data matters when you read data submitted by an HTML form, where + means a space. Decoding with the Component style keeps + as a plus sign.
  • Parse URL accepts an address without a scheme and assumes https://. Repeated keys such as tag=a&tag=b appear as separate rows, and values are shown decoded.
  • Text is encoded as UTF-8, so Tamil or emoji becomes several %XX groups per character. That is what browsers and servers expect.
  • Decoding is tolerant: a broken escape is left in place while the rest of the text is decoded.
  • Everything runs in your browser using the same functions JavaScript gives to web pages.

Questions people ask

What is the difference between encodeURI and encodeURIComponent?

Component (encodeURIComponent) encodes every reserved character, including / ? & and =, so it is right for one query value. Whole URL (encodeURI) leaves those characters alone so a complete address stays a working link. Using Component on a whole URL breaks it; using Whole URL on a value leaves & and = unencoded and can corrupt the query string.

Why is a space %20 in one style and + in another?

Percent-encoding writes a space as %20. HTML forms and application/x-www-form-urlencoded bodies write it as + instead. Pick Form data when you are reading or producing that format; in the other styles a + is just a plus sign.

Why do I see %25 or %2520 in my output?

The text was already encoded, so the % signs were encoded again. Decode it first, then encode once. Double encoding is the usual cause of links that arrive broken.

Can I decode text that is only partly encoded?

Yes. Every valid %XX escape is decoded and anything malformed, such as a stray % or %ZZ, is left as it is instead of failing the whole string.

Is anything sent to a server?

No. Encoding, decoding and parsing use the browser's own functions on your device. Nothing leaves the page.