URL Encoding Explained: Percent-Encoding and Special Characters

URLs can only safely contain a limited set of ASCII characters. When you need to include spaces, special characters, or Unicode in a URL, you need percent-encoding. This guide explains exactly how it works and when to use encodeURI vs encodeURIComponent.

Why URLs Need Encoding

The URL specification (RFC 3986) restricts URLs to a safe subset of ASCII characters. Characters outside this set — spaces, Unicode letters, many punctuation marks — would be ambiguous or break URL parsing. For example, a space in a URL looks identical to the end of the URL in many contexts, and & separates query parameters, so it can't appear unencoded as a parameter value.

Percent-encoding (also called URL encoding) is the mechanism for safely including any character in a URL by representing it as % followed by its two-digit hexadecimal ASCII code.

The Percent-Encoding Mechanism

Each unsafe character is replaced with %XX, where XX is the uppercase hexadecimal representation of the character's byte value in UTF-8:

Reserved vs Unreserved Characters

RFC 3986 defines two important categories:

Unreserved characters — safe anywhere in a URL, never need encoding:

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

Reserved characters — have special meaning in URL syntax. They must be percent-encoded when used as data (not as structural delimiters):

:  /  ?  #  [  ]  @  !  $  &  '  (  )  *  +  ,  ;  =

Everything else — spaces, non-ASCII Unicode, control characters — must always be encoded.

encodeURI vs encodeURIComponent

JavaScript provides two encoding functions, and choosing the wrong one is a common source of bugs:

encodeURI(url)

Encodes a complete URL. It leaves reserved characters unencoded because they are structural — ://, /, ?, &, =, and # all have specific meaning in a full URL.

encodeURI("https://example.com/search?q=hello world&lang=en")
// → "https://example.com/search?q=hello%20world&lang=en"
// Note: & and = are left intact (they're structural)

encodeURIComponent(value)

Encodes a single value for use inside a URL component. It encodes reserved characters — including /, ?, #, &, and = — because those characters would break the URL structure if they appeared unencoded in a parameter value.

encodeURIComponent("price=10&currency=USD/EUR")
// → "price%3D10%26currency%3DUSD%2FEUR"
// Note: = / & all encoded (they'd break query parsing unencoded)

// Building a URL safely:
const query = encodeURIComponent(userInput);
const url = `https://api.example.com/search?q=${query}`;

Rule of thumb: use encodeURIComponent for individual values you're inserting into a URL. Use encodeURI only if you have a complete URL string and just need to make it safe without breaking its structure.

Query Strings and Form Data

HTML form submissions encode data using the application/x-www-form-urlencoded format, which has a quirk: spaces are encoded as + rather than %20. This applies only to query string values in form submissions — in URL paths, + is a literal plus sign.

When processing form data on the server, use a form-aware decoder (like PHP's $_GET, Python's urllib.parse.parse_qs, or Express's req.query) rather than a raw URL decoder, so + is correctly converted to a space.

Common Mistakes

Double encoding

Encoding an already-encoded string encodes the % sign itself: hello%20world becomes hello%2520world. Decode once to recover the original. Avoid double encoding by not encoding values that are already encoded.

Using encodeURI for parameter values

encodeURI does not encode & and =, so a parameter value containing those characters will corrupt the query string. Always use encodeURIComponent for individual values.

Forgetting that % must be encoded

If your data contains literal percent signs (e.g. "50% off"), they must be encoded as %25 before inserting into a URL. Both encodeURI and encodeURIComponent handle this automatically.

Encode and Decode URLs Online

Need to quickly encode a URL or decode a percent-encoded string? The URL Encoder on DevEssentials supports both encodeURIComponent and encodeURI modes — all client-side, nothing sent to any server.

Ready to encode or decode a URL? Open the URL Encoder →