A Practical Guide to URL Encoding and Decoding
URL encoding (also called percent-encoding) is the mechanism the web uses to keep URLs unambiguous. Because URLs reserve certain characters — such as ?, &, #, and / — for structural meaning, any data that might contain those characters must be escaped before it can travel safely inside a link. A URL encoder decoderperforms this transformation so that query parameters, paths, and form values are transmitted without breaking the URL's syntax.
What Gets Encoded and Why
Reserved characters (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) and all non-ASCII characters are percent-encoded. Each disallowed byte is replaced with a % sign followed by its two-digit hexadecimal value. Spaces conventionally become%20 in paths and + inside application/x-www-form-urlencoded query strings.
encodeURI vs. encodeURIComponent
These two JavaScript functions are easy to confuse. encodeURI is meant for whole URLs and deliberately leaves reserved delimiters like /, ?, and : intact so the URL structure survives. encodeURIComponent is for a single component — such as one query parameter value — and encodes nearly everything, including slashes and ampersands. As a rule of thumb, use encodeURIComponent on every dynamic value you place into a query string to prevent injection of additional parameters.
Unicode, Emojis, and UTF-8
Modern browsers encode Unicode using UTF-8 first, then percent-encode each resulting byte. This is why an emoji like 😀 expands into several%XX sequences — its UTF-8 representation is multiple bytes long. Decoding reverses the process by reassembling the bytes and interpreting them as UTF-8, restoring the original character.
When You'll Reach for This Tool
Developers reach for a free URL encoder when building API requests, constructing deep links, debugging OAuth redirect URIs, embedding data in mailto: links, or simply verifying why a link "looks weird" after encoding. Because the encoded form is canonical and reversible, decoding it always returns the original, human-readable URL.