HTML URL Encode

Understand the topic

Percent encoding represents bytes within URL components. Reserved characters such as &, =, ?, and # can change URL structure, so encode user-supplied values before constructing a query. URLSearchParams is useful for query strings. encodeURIComponent is useful for an individual component. Decoding malformed input can fail; treat external URL data as untrusted.

Worked example

<table><caption>Common encoded component characters</caption><tr><th scope="col">Character</th><th scope="col">Encoding</th></tr><tr><td>Space</td><td>%20; form-style query encoding often uses +</td></tr><tr><td>&amp;</td><td>%26</td></tr><tr><td>=</td><td>%3D</td></tr><tr><td>?</td><td>%3F</td></tr><tr><td>#</td><td>%23</td></tr><tr><td>+</td><td>%2B</td></tr></table>

A plus sign used as literal data is different from a plus representing a space in form-style query serialization.

Practice

Encode the value A+B as one query parameter with URLSearchParams.

new URLSearchParams({ q: "A+B" }).toString();
// q=A%2BB

Common mistake

Do not encode an entire URL with encodeURIComponent when you need its slashes, colon, and separators to retain their structural meaning.

HTML documentation