help / url-encoding

URL Encoding: Complete Guide

URL encoding (officially called percent-encoding) is the process of converting characters that are not permitted or have special meaning in a URL into a safe format for transmission. It is defined in RFC 3986 and is fundamental to how URLs work on the web.

Why URL encoding is necessary

A URL can only contain characters from the ASCII character set, and within that set, certain characters are reserved because they serve structural roles in the URL syntax. A / separates path segments; a ? begins the query string; a & separates query parameters; a # begins the fragment. If any of these characters appear in a value you want to encode as part of a URL, they would be misinterpreted unless encoded.

Non-ASCII characters (accented letters, Chinese characters, emoji) also cannot appear literally in a URL — they must be encoded as their UTF-8 byte sequences, with each byte percent-encoded separately.

How percent-encoding works

A percent-encoded character is written as % followed by two hexadecimal digits representing the byte value. The encoding is always based on UTF-8 for non-ASCII characters:

  • Space ( ) → %20
  • At sign (@) → %40
  • Equals sign (=) → %3D
  • Ampersand (&) → %26
  • Plus (+) → %2B
  • Slash (/) → %2F (when used as data, not path separator)
  • é (U+00E9) → UTF-8 bytes C3 A9 → %C3%A9

Safe vs. reserved characters

Unreserved characters never need encoding: A–Z a–z 0–9 - _ . ~

Reserved characters have special meaning and must be encoded when used as data: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

Everything else must be encoded, including spaces and all non-ASCII characters.

encodeURI vs encodeURIComponent (JavaScript)

encodeURI(url) — encodes a complete URL. Leaves reserved characters intact because it assumes they serve their structural role. Use this when you have a full URL and want to make it safe for transmission without breaking its structure.

encodeURIComponent(value) — encodes a URL component. Encodes all reserved characters including /, ?, &, and =. Use this for individual query parameter values, path segments, or any string that will be embedded inside a URL.

// Building a search URL — always encode the value:
const query = "hello world & more";
const url = `/search?q=${encodeURIComponent(query)}`;
// /search?q=hello%20world%20%26%20more  ✓

// Wrong — & is not encoded:
const url2 = `/search?q=${encodeURI(query)}`;
// /search?q=hello%20world%20&%20more   ✗ (breaks query string)

Form encoding (application/x-www-form-urlencoded)

HTML form submissions use a slightly different encoding: spaces are encoded as + instead of %20, and + itself is encoded as %2B. When parsing query strings that might come from a form, handle both + and %20 as spaces. Most URL parsing libraries handle this automatically.

Decoding

Decoding reverses the process: each %XX sequence is replaced with the corresponding byte, then multi-byte sequences are decoded as UTF-8. In JavaScript, decodeURIComponent() handles this. Be careful: some encoded strings are intentionally encoded (like Base64 with + and /) and should not be decoded using URL decoding functions.

Try it now → Use the URL Encoder to percent-encode or decode any text directly in your browser.