URL Encode

What Percent-Encoding Is

A URL is not free text. RFC 3986 allows only a small set of US-ASCII characters, and some of those are reserved as structural delimiters: the slash separates path segments, the question mark starts the query, the ampersand separates parameters, the equals sign splits a key from its value, and the hash begins the fragment. If your data contains any of those characters, the parser on the other end will read them as structure rather than content.

Percent-encoding is the escape mechanism. The character is converted to its bytes in UTF-8, and each byte is written as a percent sign followed by two hexadecimal digits. A space becomes %20. Characters outside ASCII take multiple bytes, so the euro sign becomes %E2%82%AC, three bytes and therefore three escape sequences.

Characters That Are Never Encoded

The unreserved set is guaranteed safe anywhere in a URL and must be left alone, because encoding it changes nothing semantically but breaks string comparison and cache keys.

encodeURI vs encodeURIComponent

This is the single most common source of broken links. The two functions differ in one respect: whether they treat reserved delimiters as structure to preserve or as data to escape.

• encodeURI is for a whole URL. It leaves the delimiters : / ? # [ ] @ ! $ & ' ( ) * + , ; = intact so the address still parses.
• encodeURIComponent is for one piece of a URL, a single query value or path segment. It escapes those delimiters, because inside a value they are data.

The rule of thumb: if you are building a URL, use encodeURI once at the end or, better, build it with a URL object. If you are inserting a value into a URL, always use encodeURIComponent on that value alone.

Worked Example: A URL Inside a Parameter

Redirect parameters are where this bites hardest. Suppose you want to pass an entire search URL as the value of a redirect parameter.

Form Encoding: Why Spaces Become Plus

HTML form submissions use the media type application/x-www-form-urlencoded, which predates RFC 3986 and has one important quirk: a space is written as a plus sign rather than %20. Everything else follows percent-encoding as normal, and a literal plus sign in the data is encoded as %2B so the two cannot be confused.

Servers usually apply form decoding to query strings as well, which is why %20 and plus both tend to work in practice. Do not rely on it: a plus sign that survives into a value processed by a strict RFC 3986 parser stays a plus sign, and a password or search term silently changes meaning.

Percent-Encoding Reference Table

These are the characters you meet most often when working with query strings, path segments, and form data. Each one is replaced by a percent sign followed by the two hexadecimal digits of its byte value.