URL encode / decode

Which encoding to use

• Component (encodeURIComponent): for a single query value or path segment. It encodes & = ? / #, so a value can't break the URL around it. This is the usual choice.
• Form: what HTML forms and URLSearchParams produce, with spaces as +. Use it for application/x-www-form-urlencoded bodies.
• Strict RFC 3986: also encodes ! ' ( ) *. OAuth 1.0 signatures and AWS Signature Version 4 require it, because the signature is computed over the exact bytes.
• Whole URL (encodeURI): for a complete URL with spaces or non-ASCII characters in it. It keeps : / ? # & = so the URL still works, which also means it must never be used on a single value.

Decoding

• Turns + into a space for query strings and form data (switch it off for paths, where + is a literal plus).
• Detects double encoding, such as %2520 for a space, which happens when a value is encoded twice. It shows how many rounds it takes and the fully decoded text.
• Keeps going past invalid sequences, such as a stray % or Latin-1 bytes like %E9, and lists them.
• Splits a URL into scheme, host, port, path, fragment and a table of decoded query parameters, and shows an international hostname in both Unicode and punycode (xn--).

Questions

Why does my space become %20 in one place and + in another?

Both mean a space in a query string: %20 comes from percent-encoding and + from form encoding. In a URL path, only %20 is a space; a + there is a literal plus sign.

What is punycode?

DNS only carries ASCII, so international domain names are stored in an ASCII form that starts with xn--. For example, bücher.de is xn--bcher-kva.de. Browsers show the Unicode form; certificates and DNS records use the ASCII one.

Is the text sent anywhere?

No. Encoding, decoding and parsing all run in your browser, so URLs with tokens or signed parameters stay on your machine.