JavaScript has two similarly named URL encoding functions because they solve different problems. encodeURI is for an already structured URL. encodeURIComponent is for a single value that will be inserted into a URL.

If you are not writing code and just need the result, use the URL Encode tool. If you are debugging encoded JavaScript output, use the URL Decode tool.

Should I use encodeURI or encodeURIComponent?

Use encodeURIComponent for query parameter values, path segments, fragment values, and user-entered text. Use encodeURI only when you already have a complete URL and want to encode characters such as spaces or Unicode without escaping the URL's structural punctuation.

Why does encodeURI leave ampersands alone?

encodeURI leaves ampersands alone because it assumes the input is a complete URL where & may be separating query parameters. If your input is only a value, an unencoded & can split one parameter into two, which is why encodeURIComponent is safer for values.

What does encodeURIComponent encode that encodeURI does not?

encodeURIComponent encodes many structural characters, including :, /, ?, #, &, =, +, and @. That is exactly what you want when those characters are data rather than URL syntax.

Can encodeURIComponent break a full URL?

Yes. encodeURIComponent('https://example.com/search?q=test') encodes the colon, slashes, question mark, and equals sign, turning the whole URL into one data value. That is correct only when embedding one URL inside another URL parameter.

What is the safest JavaScript way to build query strings?

The safest JavaScript approach is to use URL and URLSearchParams, or encode every individual value with encodeURIComponent. Avoid manual string concatenation unless you are certain each value is already encoded exactly once.

Why does decodeURIComponent not turn + into a space?

decodeURIComponent follows percent-decoding rules and treats + as a literal plus sign. If the input came from form-encoded query data, replace + with a space or %20 before decoding, or use a parser that understands form encoding.

How can I verify JavaScript encoding output?

Paste the produced value into the URL Decode tool and check whether every reserved character came back as intended. If an ampersand or equals sign changes the parameter structure, the original value was not encoded correctly.