If you've ever seen a URL with %20 where a space should be, or %2F where a slash appears, you've encountered percent encoding — the mechanism that makes arbitrary text safe to transmit in a URL. Understanding how URL encoding works is essential for web developers building APIs, query strings, redirects, and form handlers.

Why URLs Need Encoding

URLs follow the RFC 3986 specification, which defines a very limited set of characters that are safe to use directly in a URL. These unreserved characters can appear without encoding:

A-Z  a-z  0-9  -  _  .  ~

Everything else — including spaces, slashes, question marks, ampersands, and encoding guide — must be percent-encoded when used as data within a URL component (like a query parameter value).

The reason is practical: the URL structure uses specific characters as delimiters. ? starts the query string, & separates parameters, # starts the fragment, and / separates path segments. If your data contains any of those characters, they must be encoded so the URL parser does not misinterpret them.

How Percent Encoding Works

Percent encoding replaces a character with its UTF-8 byte value expressed as %XX, where XX is the uppercase hexadecimal value. For example:

space   => %20
!       => %21
#       => %23
$       => %24
%       => %25  (the percent sign itself must be encoded!)
&       => %26
/       => %2F
:       => %3A
=       => %3D
?       => %3F
@       => %40
[       => %5B
]       => %5D

For non-ASCII characters (like emoji or accented letters), the character is first encoded as UTF-8 bytes, and each byte is percent-encoded individually:

e with accent  =>  UTF-8: 0xC3 0xA9  =>  %C3%A9
euro sign      =>  UTF-8: 0xE2 0x82 0xAC  =>  %E2%82%AC
emoji          =>  UTF-8: 0xF0 0x9F 0x98 0x80  =>  %F0%9F%98%80

encodeURI vs. encodeURIComponent: A Critical Distinction

JavaScript gives you two built-in functions, and confusing them is a very common source of bugs:

// encodeURI — encodes a full URL, preserves structure characters
encodeURI("https://example.com/path?q=hello world&lang=en")
// Result: "https://example.com/path?q=hello%20world&lang=en"
// Note: & and ? are NOT encoded — they are kept as URL structure

// encodeURIComponent — encodes a URL component value
encodeURIComponent("hello world & goodbye")
// Result: "hello%20world%20%26%20goodbye"
// Note: & IS encoded — it is being treated as data, not structure

The rule is simple: use encodeURIComponent() for any value you are inserting into a URL (query parameter values, path segment data). Use encodeURI() only when encoding a complete URL that already has valid structure.

Common URL Encoding Mistakes

Double-encoding

If you encode an already-encoded string, % becomes %25, and %20 becomes %2520. Always decode before re-encoding if you are unsure of the string's current state.

The + vs. %20 ambiguity

HTML Entity Encoder encode spaces as + in application/x-www-form-urlencoded format. Pure URL percent encoding uses %20. Both mean "space," but only in their respective contexts. Some servers handle both; others treat + as a literal plus sign in certain contexts. When in doubt, use %20.

Forgetting to encode redirect URLs

If you pass a URL as a query parameter (e.g., ?redirect=https://example.com/path?foo=bar), the inner URL's ? and & will break the outer URL's structure. Always encode the redirect URL value:

const redirectUrl = "https://example.com/path?foo=bar";
const safeUrl = "/login?redirect=" + encodeURIComponent(redirectUrl);
// Result: /login?redirect=https%3A%2F%2Fexample.com%2Fpath%3Ffoo%3Dbar

URL Decoding: Reading Encoded URLs

Decoding reverses the process. In JavaScript:

decodeURIComponent("hello%20world%20%26%20goodbye")
// Result: "hello world & goodbye"

decodeURIComponent("%F0%9F%98%80")
// Result: emoji smiley face

When debugging API requests, webhook payloads, or server logs, a URL decoder quickly converts percent-encoded strings back to readable form. This is especially useful with OAuth tokens, SAML assertions, and redirect parameters that often contain heavily encoded data.

Real-World Use Cases

  • Building API query strings — Always encode parameter values, never the keys.
  • OAuth redirect URIs — The redirect_uri parameter must be encoded when included in an authorization URL.
  • Debugging 400 Bad Request errors — Often caused by unencoded special characters in URLs.
  • Reading server access logs — Logs store raw percent-encoded URLs; a decoder makes them readable.
  • Constructing mailto: links — Subject and body parameters need encoding.

Encode and Decode URLs Instantly

Our free URL Encoder/decoder tool handles both directions — encode raw text into URL-safe format, or decode a percent-encoded string back to readable text. Supports full Unicode and runs entirely in your browser.

Try the free URL Encoder/Decoder on QuickWebTools