What Is URL Encoding?
URL encoding, also called percent-encoding, is the process of replacing characters that aren't allowed in URLs with a % followed by two hexadecimal digits representing the character's byte value. For example, a space becomes %20 and an ampersand becomes %26. This is defined by RFC 3986 and is essential for constructing valid URLs that contain special characters, international text, or reserved characters used as data.
encodeURIComponent vs encodeURI
JavaScript provides two URL encoding functions that confuse many developers. encodeURI() encodes a complete URL while preserving characters that have structural meaning (/ ? # & =). Use it when you have a full URL and want to make it safe without breaking its structure. encodeURIComponent() encodes everything except unreserved characters — use it when encoding a single component like a query parameter value. Using the wrong one is a common bug: if you use encodeURI on a query value containing &, it won't encode it, breaking your URL structure.
The Space Encoding Debate: %20 vs +
Both %20 and + represent spaces in URLs, but they come from different standards. %20 is the RFC 3986 standard and works everywhere. + comes from the older application/x-www-form-urlencoded format used by HTML form submissions. In practice, most servers accept both in query strings. Use %20 as the default — it's more universally compatible, especially in path segments where + is treated as a literal plus sign.
Common Use Cases
100% Client-Side — Your Data Stays Private
All encoding, decoding, and URL parsing runs entirely in your browser using native JavaScript APIs. No data is ever sent to a server, stored, or logged. This makes it safe to encode sensitive values like API keys, authentication tokens, OAuth callback URLs, and query strings containing personal data. Close the tab and everything is gone.