URL Encoder / Decoder

URLs are restricted to a small ASCII subset, so anything outside it is percent-encoded: a byte becomes a percent sign followed by two hex digits. A space becomes %20, and a non-ASCII character becomes one escape per UTF-8 byte, which is why an emoji expands to four.

Which characters need escaping depends on where they sit. In a query-string value, an ampersand and an equals sign must be escaped or they will be read as separators. In a path segment, a slash must be escaped or it creates a new segment. Encoding the whole URL at once is the classic mistake - it escapes the slashes and colon in the scheme and breaks it entirely.

This is why JavaScript has two functions. encodeURIComponent escapes separators and is right for a single value; encodeURI leaves them alone and is for a whole URL. Using the second where you needed the first is how injected parameters happen.

Decoding is not symmetric with encoding, because a percent sign followed by anything other than two hex digits is malformed. Decoders either throw or pass it through, and code that assumes decoding always succeeds breaks on user-supplied input.

Double-encoding is the other common trap: a value encoded twice needs decoding twice, and decoding once leaves visible escape sequences. This appears constantly in URLs that have passed through a redirect service.

encodeURIComponent encodes characters like / and ? that are valid in a full URL but not in a query string value. For query parameters, always use encodeURIComponent. For a complete URL, use encodeURI.

You need percent-encoding whenever a value can contain reserved characters. A space becomes %20, a hash becomes %23, and an ampersand becomes %26. Skipping encoding can break links or let a query string terminate early.