URL encoding (percent-encoding) is a mechanism for encoding special characters in URLs by replacing them with a percent sign (%) followed by their two-digit hexadecimal ASCII value. For example, a space becomes %20 and an ampersand becomes %26.
Why URL encoding exists
URLs can only contain a limited set of characters from the ASCII character set. Characters like spaces, &, =, ?, #, and non-ASCII characters (accented letters, emoji, CJK characters) have special meaning in URL syntax or simply aren’t allowed. URL encoding translates these characters into a safe, universally accepted format.
Without encoding, a search query like "fish & chips" in a URL parameter would break parsing — the & would be interpreted as a parameter separator, and the spaces are invalid.
Raw: https://example.com/search?q=fish & chips
Encoded: https://example.com/search?q=fish%20%26%20chipsReserved vs. unreserved characters
The URL specification (RFC 3986) defines two groups:
- Unreserved (never need encoding):
A-Z,a-z,0-9,-,_,.,~ - Reserved (have special meaning):
:,/,?,#,[,],@,!,$,&,',(,),*,+,,,;,=
Reserved characters only need encoding when used outside their intended purpose. A / in a path segment is fine; a / inside a query parameter value should be encoded as %2F.
encodeURI vs. encodeURIComponent
JavaScript provides two functions, and mixing them up is a common bug:
encodeURI()encodes a full URI, leaving reserved characters like?,&,=, and/intact.encodeURIComponent()encodes everything except unreserved characters. Use this for encoding individual parameter values.
encodeURI("https://example.com/path?q=hello world")
// "https://example.com/path?q=hello%20world"
encodeURIComponent("hello world&more")
// "hello%20world%26more"The + vs. %20 debate
In HTML form submissions (application/x-www-form-urlencoded), spaces are encoded as +. In standard percent-encoding (RFC 3986), spaces are %20. Both are valid in different contexts, but %20 is the safer default for general URL construction.
Encode and decode URLs with the URL Encoder/Decoder. Need to break down a URL into its components? Use the URL Parser.