When do I use "Component" versus "Full URL"?

Use Component ( encodeURIComponent ) when the text is a single piece that goes inside a URL — one query-string value, one path segment. It escapes / , ? , & , = , and # so they can't be mistaken for structure. Use Full URL ( encodeURI ) only when you have a whole URL and just want to fix spaces and non-ASCII while leaving the :// , slashes, and ? intact.

Why is a space sometimes %20 and sometimes +?

In a URL path or a generic component, a space is %20 . In application/x-www-form-urlencoded data — the body of a classic HTML form POST, and often the query string — a space is + . They are not interchangeable in every context. The Form scope here produces and reads + ; the other scopes use %20 .

Decoding threw "URI malformed". What does that mean?

The input contains a % that isn't followed by two valid hex digits, or a percent-escape that doesn't form a valid UTF-8 sequence. A literal percent sign in text must itself be written as %25 before the string can be decoded.

Does it double-encode if I run encode twice?

Yes. Encoding a b gives a%20b ; encoding that again gives a%2520b because the % is now escaped. Double-encoding is a common bug when a value passes through two layers that both encode. Decode the same number of times you encoded.

URL Encode / Decode (Percent-Encoding)

Percent-encode or decode a full URL, a query component, or a single path segment.

What this does

Percent-encoding (also called URL-encoding) replaces characters that are unsafe or reserved in a URL with a % followed by their byte value in hexadecimal. This tool applies the three standard JavaScript behaviours — encodeURIComponent, encodeURI, and form-style encoding where space becomes + — and reverses each. Non-ASCII characters are encoded as their UTF-8 bytes, so é becomes %C3%A9.

It's all client-side. You can paste a full URL with an auth token or a customer identifier in the query string and nothing is sent anywhere.

When you'd use it

Building a query string by hand and needing to escape a value that contains &, =, or a space.
Reading a redirect URL where the return_to parameter is itself an encoded URL.
Debugging why a link breaks — often because a value wasn't component-encoded and its & split the query string.
Decoding a copied URL so you can read the parameters, then re-encoding after editing one.

Worked example

You want q to be the search phrase tabs & spaces and next to be the path /settings?tab=1. Component-encode each value:

tabs%20%26%20spaces
%2Fsettings%3Ftab%3D1

Assemble the URL:

https://example.com/search?q=tabs%20%26%20spaces&next=%2Fsettings%3Ftab%3D1

Because the & and ? inside the values were escaped, the browser sees exactly two parameters. Feed the whole thing back through Decode (Component scope on just each value) to recover the originals. If instead you had used Full URL scope on the values, the & would have stayed literal and next would have been truncated.

Limits and gotchas

Scope matters. Encoding a whole URL with Component scope escapes the :// and slashes, producing a string that is no longer a usable URL.
Plus vs percent-twenty. Decoding form data with the wrong scope leaves + signs as literal pluses or turns real pluses into spaces.
Reserved but not escaped. encodeURI leaves &, +, ,, and # alone by design; those still need manual attention inside a value.
Non-UTF-8 input. The encoders assume UTF-8. Legacy encodings like Latin-1 will produce different bytes than a system expecting them would.
It doesn't validate URLs. A well-encoded string can still be a nonsense URL.

Frequently asked questions

When do I use "Component" versus "Full URL"?: Use Component (encodeURIComponent) when the text is a single piece that goes inside a URL — one query-string value, one path segment. It escapes /, ?, &, =, and # so they can't be mistaken for structure. Use Full URL (encodeURI) only when you have a whole URL and just want to fix spaces and non-ASCII while leaving the ://, slashes, and ? intact.
Why is a space sometimes %20 and sometimes +?: In a URL path or a generic component, a space is %20. In application/x-www-form-urlencoded data — the body of a classic HTML form POST, and often the query string — a space is +. They are not interchangeable in every context. The Form scope here produces and reads +; the other scopes use %20.
Decoding threw "URI malformed". What does that mean?: The input contains a % that isn't followed by two valid hex digits, or a percent-escape that doesn't form a valid UTF-8 sequence. A literal percent sign in text must itself be written as %25 before the string can be decoded.
Does it double-encode if I run encode twice?: Yes. Encoding a b gives a%20b; encoding that again gives a%2520b because the % is now escaped. Double-encoding is a common bug when a value passes through two layers that both encode. Decode the same number of times you encoded.

URL encoder and decoder

What this does

When you'd use it

Worked example

Limits and gotchas

Frequently asked questions

Related tools