What is percent-encoding?

URLs are restricted to a subset of ASCII characters. Characters that are either reserved (they have special meaning in URL syntax) or unsafe (spaces, non-ASCII characters, control characters) must be percent-encoded before they can appear in a URL. Percent-encoding replaces a character with a %followed by two hexadecimal digits representing the character's UTF-8 byte value.

space  → %20
&      → %26
=      → %3D
?      → %3F
#      → %23
+      → %2B
/      → %2F (when used literally, not as a path separator)
@      → %40
"      → %22
<      → %3C
>      → %3E

encodeURI vs encodeURIComponent in JavaScript

JavaScript provides two encoding functions that are often confused:

• encodeURI(url) — encodes a complete URL. It preserves characters that have meaning in URL structure: / ? # : @ ! $ & ' ( ) * + , ; =. Use this when you have a full URL and want to make it safe to transmit.
• encodeURIComponent(value) — encodes a URL component (a single query parameter value, a path segment). It encodes everything except unreserved characters: letters, digits, -, _, ., ~. Use this when encoding a value that will be inserted into a URL.

// Encoding a full URL — preserves structure
encodeURI("https://example.com/search?q=hello world&lang=en")
// → "https://example.com/search?q=hello%20world&lang=en"

// Encoding a query parameter value — encodes everything
encodeURIComponent("hello world & more")
// → "hello%20world%20%26%20more"

// Building a URL safely — always use encodeURIComponent for values
const q = "C++ tutorials & examples";
const url = "https://example.com/search?q=" + encodeURIComponent(q);
// → "https://example.com/search?q=C%2B%2B%20tutorials%20%26%20examples"

The + vs %20 difference

In query strings, a space can be encoded as either %20 or + (a plus sign). The + encoding comes from HTML form submissions (application/x-www-form-urlencoded format) and is technically only valid in query strings, not in path segments. %20 is universally valid in all URL parts. When decoding, treat both as a space in query string context.

Common use case: passing URLs as query parameters

A frequent scenario is passing a URL as the value of a query parameter — for example, a redirect destination:

// Bad — the inner URL breaks the outer URL's structure
https://example.com/login?redirect=https://example.com/dashboard?tab=settings

// Good — the inner URL is encoded
https://example.com/login?redirect=https%3A%2F%2Fexample.com%2Fdashboard%3Ftab%3Dsettings

Decoding encoded URLs from logs

Access logs and API request logs frequently contain percent-encoded URLs. Pasting an encoded URL like /search%3Fq%3Dhello%2520world into this tool will decode it to /search?q=hello%20world — note the double-encoding in the original (%25 is an encoded % sign). Understanding double-encoding is important when debugging redirect chains and proxy logs.

Form data encoding

When an HTML form is submitted with method="POST" and enctype="application/x-www-form-urlencoded" (the default), the browser encodes the form fields in the request body using the same percent-encoding rules, with spaces as +. This is the format most server-side frameworks parse automatically when handling form POSTs.