What is the difference between encodeURI and encodeURIComponent?

encodeURI leaves the characters that structure a URL (/, ?, &, #, :) alone. encodeURIComponent encodes them, which is what you want for a single parameter value.

Should a space be + or %20?

+ only in form-encoded query strings and bodies. %20 everywhere else. Decoders for query strings accept both.

Why does decoding fail?

A % must be followed by two hex digits, and the bytes must form valid UTF-8. The error says which.

How do I parse a whole query string?

Use the query string parser. It splits the parameters into a table and decodes each one.

URL encode and decode

Percent-encode text for a URL or query string, or decode it back.

Runs in your browser. Your input is not uploaded.

Input

Encoded

What it does

Percent-encoding replaces characters that are not allowed in a URL with % and two hex digits per UTF-8 byte. A space becomes %20 and é becomes %C3%A9.

Which characters get encoded depends on where the text goes. A query value must encode &, = and /; a whole URL must not, or it stops being a URL.

How to use it

Paste the text or URL.
Choose Component for a single value, Full URI for a whole address, or Form for application/x-www-form-urlencoded bodies.
Encode or decode and copy the result.

Example: Component

Input

a b&c=d/é

Output

a%20b%26c%3Dd%2F%C3%A9

Things to watch for

Encoding a value twice turns %20 into %2520. If you see %25, something encoded it twice.
In form encoding a space is +. In a path it is %20, and + is a literal plus.

Questions

What is the difference between encodeURI and encodeURIComponent?: encodeURI leaves the characters that structure a URL (/, ?, &, #, :) alone. encodeURIComponent encodes them, which is what you want for a single parameter value.
Should a space be + or %20?: + only in form-encoded query strings and bodies. %20 everywhere else. Decoders for query strings accept both.
Why does decoding fail?: A % must be followed by two hex digits, and the bytes must form valid UTF-8. The error says which.
How do I parse a whole query string?: Use the query string parser. It splits the parameters into a table and decodes each one.