toolready. URL Encode / Decode

URL Encode / Decode

Percent-encode and decode URL components — handles whole URIs or single params.

What this does

Percent-encodes and decodes text as you type, with a scope switch choosing which browser primitive runs. Component uses encodeURIComponent / decodeURIComponent — right for a single query value or path segment. Whole URI uses encodeURI / decodeURI and leaves a complete URL's structure intact. Both run locally, so URLs carrying tokens or customer data stay on your machine.

What is URL encoding?

A way of writing bytes a URL cannot carry literally. Each unsafe byte becomes % plus its two hex digits: a space is %20, & is %26. Non-ASCII text is UTF-8 encoded first, so one character can become several escapes — é is two bytes and encodes to %C3%A9. Encoding keeps data from being read as structure: an unencoded & inside a value silently starts a new parameter.

How do I encode a redirect URL inside a query parameter?

  1. Select Encode and leave the scope on Component.
  2. Paste only the inner URL — the value, not the whole link you are building.
  3. Copy the output and drop it after your ?next=.
inner value   https://app.example.com/dash?tab=1&sort=desc
encoded       https%3A%2F%2Fapp.example.com%2Fdash%3Ftab%3D1%26sort%3Ddesc
final link    https://id.example.com/login?next=https%3A%2F%2Fapp.example.com%2F…

Whole URI would return that inner URL unchanged, because encodeURI treats : / ? & = as legitimate structure. Pasted after next=, its &sort=desc would be parsed as a parameter of the outer URL and the redirect would arrive truncated.

What is the difference between encodeURI and encodeURIComponent?

Which characters they treat as reserved. encodeURIComponent escapes everything except letters, digits and - _ . ! ~ * ' ( ). encodeURI additionally leaves the URL delimiters alone: ; / ? : @ & = + $ , #. So encodeURI('https://example.com/path?a=1') returns the string untouched, while the component form escapes all of it.

InputComponentWhole URIForm (URLSearchParams)
space%20%20+
&%26&%26
/%2F/%2F
é%C3%A9%C3%A9%C3%A9
'''%27

Why does my space become + instead of %20?

Because form encoding is a different scheme. HTML forms and URLSearchParams serialize as application/x-www-form-urlencoded, which writes a space as + and escapes a few characters percent-encoding leaves alone, such as ' and !. Neither mode here produces +; if a server expects form encoding, swap the %20s afterwards or build the string with URLSearchParams. The distinction matters because + only means "space" in a query string — inside a path segment it is a literal plus sign, so /files/a+b.txt and /files/a%20b.txt are different resources.

Why does decoding fail or leave escapes behind?

Two cases. "Invalid input for decoding" means the input is not valid percent-encoding — a stray %, or a truncated escape like %E0%A4%A whose bytes are not legal UTF-8; decoding stops and the output clears rather than guessing. Separately, Whole URI decoding deliberately leaves %23, %26, %2F and the other reserved escapes untouched, because turning them into real delimiters would change what the URL means; switch to Component to see the fully decoded value.

What is double encoding?

Encoding a value that was already encoded, so % itself gets escaped and %20 becomes %2520. It happens when a proxy, a framework router and your own code each encode the same parameter. If a decoded value still contains % sequences, decode it again — then find the layer doing the extra pass, because the fix belongs there. Related: Base64 encode/decode for binary payloads, HTML entity encode/decode for text going into markup, and JSON formatter for the response that comes back.