When do I use encodeURIComponent instead of encodeURI?

Use encodeURIComponent for a single value going into a query string or path segment — it escapes &, =, ?, / and #, which would otherwise change the URL's structure. Use encodeURI for a whole URL you want to keep working. Encoding a full URL with encodeURIComponent is the more common mistake.

Why is a space sometimes %20 and sometimes +?

%20 is the percent-encoding of a space and is valid anywhere in a URL. The + form is specific to application/x-www-form-urlencoded, which is how HTML forms encode a query string. In a path segment, + means a literal plus sign.

What does decoding fail on?

A percent sign that is not followed by two hexadecimal digits, and byte sequences that are not valid UTF-8. Both are reported here rather than silently replaced, because a mangled value is usually a bug worth finding.

URL Encoder / Decoder

Encode or decode URLs and query values, with the component and full-URL variants side by side.

encodeURIComponent()

Escapes every character that has a reserved meaning in a URL, including / ? : @ & = + $ and #. Use it for a single query-string value or path segment.

Input

Paste a URL or value

Conversion is live

Output

Output appears here.

Processed locally in your browser. Conversion uses the browser's own URL functions. Nothing you paste is requested, resolved or sent anywhere.

Reference

encodeURI or encodeURIComponent?

The difference is which characters are treated as structure. Reserved characters — / ? : @ & = + $ , # — separate the parts of a URL. encodeURI() leaves them alone because it assumes you are handing it a whole URL that is already assembled. encodeURIComponent() escapes them, because it assumes you are handing it one value that must not be mistaken for structure.

The rule of thumb: use encodeURIComponent() for anything you are putting into a URL, and encodeURI() for a URL you are fixing up as a whole.

Input	Result
encodeURI(a/b?c=d)	a/b?c=d — delimiters preserved
encodeURIComponent(a/b?c=d)	a%2Fb%3Fc%3Dd — everything escaped

Plus signs are not spaces

In a URL path, + is a literal plus. In an application/x-www-form-urlencoded query string it means a space — a convention from HTML forms, not from the URL specification. decodeURIComponent() follows the specification, so it leaves + alone. If you are decoding a form-encoded query, replace + with a space first, or use URLSearchParams, which handles the convention for you.

What never gets escaped

The unreserved set — A-Z a-z 0-9 - _ . ~ — is always safe. encodeURIComponent() additionally leaves ! * ' ( ) unescaped for historical reasons, which matters if you are producing a signature over an encoded string and your server-side library escapes them. Normalise on one side or the other.

Why decoding fails

Decoding throws when a % is not followed by two hexadecimal digits, or when the escapes form a byte sequence that is not valid UTF-8 — usually a URL that was truncated mid-character or double-encoded. The position of the first bad escape is reported so you can find the break.

Questions

When do I use encodeURIComponent instead of encodeURI?: Use encodeURIComponent for a single value going into a query string or path segment — it escapes &, =, ?, / and #, which would otherwise change the URL's structure. Use encodeURI for a whole URL you want to keep working. Encoding a full URL with encodeURIComponent is the more common mistake.
Why is a space sometimes %20 and sometimes +?: %20 is the percent-encoding of a space and is valid anywhere in a URL. The + form is specific to application/x-www-form-urlencoded, which is how HTML forms encode a query string. In a path segment, + means a literal plus sign.
What does decoding fail on?: A percent sign that is not followed by two hexadecimal digits, and byte sequences that are not valid UTF-8. Both are reported here rather than silently replaced, because a mangled value is usually a bug worth finding.