URL Encode Plus Sign (+)

The plus sign (+) has a dual identity in URLs that causes significant confusion. In query strings using application/x-www-form-urlencoded format, + represents a space character. But when you need a literal plus sign in a URL, it must be encoded as %2B.

Percent-encoded form: %2B represents the plus sign (ASCII code 43, hexadecimal 0x2B).

The confusion explained: There are two different encoding standards at play:

1. RFC 3986 (URI standard): A space is encoded as %20. A plus sign is a regular character that does not need encoding in most URL components.
2. HTML form encoding (application/x-www-form-urlencoded): A space is encoded as +. Therefore, a literal + must be encoded as %2B to avoid being decoded as a space.

Most query strings on the web use form encoding conventions, so + in a query string is almost always interpreted as a space.

JavaScript behavior:

encodeURIComponent("+")          // "%2B"
encodeURIComponent("1+1=2")     // "1%2B1%3D2"

// URLSearchParams uses form encoding, so it encodes spaces as +
new URLSearchParams({q: "a b"}).toString()   // "q=a+b"
new URLSearchParams({q: "a+b"}).toString()   // "q=a%2Bb"

// Decoding + as space (form encoding behavior)
new URLSearchParams("q=a+b").get("q")        // "a b"

Common scenarios:

• Phone numbers with country codes: +1-555-0100 must be encoded as %2B1-555-0100
• Mathematical expressions: 2+2 in a query becomes 2%2B2
• Time zone offsets: UTC+05:30 needs the plus encoded
• Google search: Try searching for "C++" and observe how it appears in the URL

Pitfall: If a user submits a form containing "C++" and the server receives the value "C " (with two spaces), the plus signs were decoded as spaces because they were not encoded as %2B. This is particularly common when building URLs manually rather than using URLSearchParams or encodeURIComponent().