How to URL-Encode a String (and Why It Matters)

URLs are only allowed to contain a limited set of characters, so when your data contains a space, an ampersand, or a question mark, you can't just drop it into a link — you have to encode it first. URL encoding (also called percent-encoding) replaces unsafe characters with a % followed by their hex code. A space becomes %20, an ampersand becomes %26, and so on.

Why it matters

Imagine putting the search term salt & pepper into a query string: ?q=salt & pepper. The browser sees the & as the start of a new parameter and the spaces as the end of the URL, so your value breaks apart. Percent-encoding it to ?q=salt%20%26%20pepper keeps the whole phrase together as one value. You can encode or decode any string instantly with the URL Encoder/Decoder.

The characters that need encoding

The troublemakers are the reserved characters that have special meaning in a URL:

• Space → %20 (or sometimes + in query strings)
• & → %26 (separates parameters)
• = → %3D (assigns a value to a key)
• ? → %3F (starts the query string)
• # → %23 (starts the fragment)
• /, :, +, and non-ASCII characters like accented letters or emoji also need encoding inside a value.

encodeURIComponent vs encodeURI

JavaScript gives you two functions, and picking the wrong one is the most common source of bugs:

• encodeURIComponent encodes almost everything, including &, =, ?, and /. Use it for a single piece of a URL — one query parameter value, one path segment.
• encodeURI assumes you're handing it a whole, already-structured URL, so it deliberately leaves &, =, ?, /, and : alone. Use it only to tidy an entire URL, never to encode an individual value.

Rule of thumb: if you're building ?key=VALUE, run VALUE through encodeURIComponent.

Common mistakes

• Encoding the whole URL when you meant one parameter. Running https://site.com/?q=a b through encodeURIComponent mangles the https:// and the ? into %3A%2F%2F and %3F, producing a dead link. Encode only the value, then assemble the URL around it.
• Double-encoding. Encoding an already-encoded string turns %20 into %2520 (the % itself gets encoded). If your spaces show up as literal %2520, you encoded twice — decode once with the URL Encoder/Decoder to recover.
• Confusing it with Base64 or HTML entities. For binary-to-text use the Base64 Encoder/Decoder; to display characters safely in HTML use the HTML Entity Encoder. URL encoding solves a different problem: making data safe inside a link.