URL Encoder/Decoder

encode vs encodeURIComponent — which one to use

JavaScript ships two encoding functions and they are not interchangeable. encodeURI() leaves structural URL characters untouched — it won't encode : / ? # [ ] @ ! $ & ' ( ) * + , ; = — because it's designed to encode a complete URL while preserving its structure. encodeURIComponent() encodes all of those characters too, because it's designed to encode a single value that will appear inside a URL, such as a query parameter value or a path segment.

The most common mistake is using encodeURI() on a query parameter value that contains an ampersand or equals sign. The ampersand won't be encoded, so it will be parsed as a parameter separator instead of part of the value. Always use encodeURIComponent() on individual values, then assemble the URL manually or let a URLSearchParams object handle the joining.

When double-encoding happens and how to avoid it

Double-encoding produces strings like %2520 (a percent sign that was itself encoded, turning %20 into %2520). It happens when you encode an already-encoded string, or when a framework encodes a value that your code already encoded. The fix is to always decode to a known raw state before re-encoding, and to encode at exactly one layer — typically at the point where you assemble the URL, not before.