When you type a URL in a browser, it looks clean and readable. But URLs are actually constrained to a specific set of characters defined in RFC 3986. Any character outside that set — spaces, accented letters, symbols like & or # — must be encoded before being used in a URL. This process is called URL encoding, or percent-encoding.
What is percent-encoding?
Percent-encoding replaces a character with a % followed by two hexadecimal digits representing the character's UTF-8 byte value. A space becomes %20, @ becomes %40, and / becomes %2F when used as data rather than a path separator.
For example, the search query hello world & more would be encoded as hello%20world%20%26%20more in a query parameter. Without encoding, the browser and server would misinterpret the & as a query parameter separator.
Which characters need encoding?
RFC 3986 defines two categories of URL characters:
Reserved characters have special meaning in URL structure: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. When these appear as data (not structure), they must be percent-encoded.
Unreserved characters are always safe and never need encoding: A–Z a–z 0–9 - _ . ~.
Everything else — spaces, non-ASCII characters, most punctuation — must be percent-encoded. Non-ASCII characters like é are first converted to their UTF-8 byte sequence (two or more bytes), then each byte is percent-encoded separately. é (U+00E9) becomes %C3%A9.
encodeURI vs encodeURIComponent
JavaScript provides two functions for URL encoding, and choosing the wrong one is a common bug:
encodeURI() encodes a complete URL. It leaves reserved characters (/ : ? # & etc.) untouched because it assumes they are serving their structural role. Use this when you want to encode an entire URL while preserving its structure.
encodeURIComponent() encodes a URL component — a single query parameter value, a path segment, or a fragment. It encodes all reserved characters including &, =, and /. Use this when encoding individual values that will be embedded in a URL.
For example: encodeURIComponent("price=10&tax=2") gives price%3D10%26tax%3D2, which is correct for a query parameter value. Using encodeURI instead would leave & and = unencoded, breaking the query string.
Form submission and application/x-www-form-urlencoded
HTML forms submitted with method="GET" or method="POST" using the default application/x-www-form-urlencoded content type also percent-encode their data, with one difference: spaces are encoded as + instead of %20. This is a legacy convention from earlier web standards, not standard percent-encoding.
Practical tips
- Always use
encodeURIComponentwhen building URLs programmatically from user-supplied data. - Never manually construct URLs with string concatenation without encoding each component — use URL builder APIs like JavaScript's
URLandURLSearchParams. - URLs displayed to users can show decoded characters for readability, but the actual network request always uses the encoded form.
Use the URL Encoder and URL Decoder on TextUtils to encode or decode URL strings instantly in your browser.