URL Encode Ampersand (&)

The ampersand (&) is a reserved character in URLs that serves as the delimiter between query parameters. When an ampersand appears as part of a parameter value rather than as a separator, it must be encoded as %26 to avoid ambiguity.

Why encoding matters: Consider the URL /search?q=Tom & Jerry&lang=en. Without encoding, the parser interprets three parameters: q=Tom , an empty parameter named Jerry, and lang=en. The intended value Tom & Jerry is split incorrectly. The correct URL is /search?q=Tom%20%26%20Jerry&lang=en.

Percent-encoded form: %26 represents the ampersand character (ASCII code 38, hexadecimal 0x26). This encoding tells the URL parser to treat it as a literal character within the value rather than a parameter separator.

JavaScript encoding:

encodeURIComponent("Tom & Jerry") // "Tom%20%26%20Jerry"
encodeURI("Tom & Jerry")          // "Tom%20&%20Jerry" (does NOT encode &)

Notice the critical difference: encodeURI() does not encode ampersands because it treats the input as a full URI where & is a valid delimiter. Only encodeURIComponent() encodes it, because it treats the input as a single URI component (like a parameter value).

Common scenarios:

• Passing company names like "AT&T" in query parameters
• Embedding URLs within other URLs (callback URLs with their own query strings)
• Sending XML or HTML content that contains & within URL parameters
• Building OAuth signatures where the base string includes & separators

Pitfall to avoid: When building URLs by concatenation, forgetting to encode values that contain & is one of the most common bugs. Always use URLSearchParams or encodeURIComponent() for parameter values rather than manual string concatenation. The URLSearchParams API handles this automatically: new URLSearchParams({q: "Tom & Jerry"}).toString() produces q=Tom+%26+Jerry.