URL encoding, also called percent-encoding, replaces characters that are unsafe or reserved in a URL with a percent sign followed by their two-digit hexadecimal byte value. A space becomes %20, an ampersand becomes %26, and so on. It exists because URLs can only contain a limited set of ASCII characters, so anything outside that set has to be escaped to travel safely.
Without encoding, a URL like search?q=cats & dogs breaks: the space ends the URL and the ampersand looks like the start of a new parameter. Percent-encoding turns the value into cats%20%26%20dogs so the whole thing is read as one piece of data.
How percent-encoding works
Each unsafe character is converted to its UTF-8 bytes, and each byte is written as % plus two hex digits. Common examples:
| Character | Encoded | Why it needs encoding |
|---|---|---|
| space | %20 | Spaces are not allowed in URLs |
& | %26 | Separates query parameters |
? | %3F | Starts the query string |
= | %3D | Assigns a parameter value |
# | %23 | Starts the fragment |
/ | %2F | Separates path segments |
+ | %2B | Can mean a space in query strings |
ñ | %C3%B1 | Non-ASCII, encoded as its two UTF-8 bytes |
Letters, digits, and a handful of safe marks like -, _, ., and ~ are never encoded.
encodeURI vs encodeURIComponent
JavaScript gives you two functions, and picking the wrong one is the most common URL-encoding bug.
encodeURIComponentencodes almost everything, including/,?,&, and=. Use it for a single piece of data, like a query-string value or a path segment.encodeURIleaves the structural characters of a URL intact. Use it to encode a complete URL where the/,?, and&need to keep their meaning.
The rule of thumb: encode the value, not the whole address. If you are inserting a user-supplied string into a URL, reach for encodeURIComponent.
When decoding fails
decodeURIComponent throws an error if it hits a % that is not followed by two valid hex digits. This happens when input contains a literal % that was never encoded in the first place. The fix is to always encode the source before embedding it, and to store URLs in a single, consistent encoded form.
Encode or decode a URL
Paste any URL or value into our URL encoder and decoder to percent-encode or decode it instantly. It auto-detects which direction you need and supports both full-URL and single-component modes. For related transforms, see the Base64 encoder and the HTML entity encoder. For the full set, browse all our developer tools.