What is URL Encoding?

URL encoding (also called percent encoding) converts characters that aren't allowed in URLs into a safe format. It replaces unsafe characters with a % followed by two hexadecimal digits representing the character's ASCII value.

Hello World!

URL encoded:

Hello%20World%21

Why? URLs can only contain a limited set of ASCII characters. Spaces, special characters, and non-ASCII characters would break the URL or be misinterpreted by browsers and servers.

Reserved vs Unsafe Characters

URLs have two types of problematic characters:

Type	Characters	Why They're Special
Reserved	`! # $ & ' ( ) * + , / : ; = ? @ [ ]`	Have special meaning in URLs
Unsafe	Space, `< > { } \| \ ^ ~ [ ]` `	May be mishandled by systems
Non-ASCII	`cafe`, emojis, accents	Not part of URL character set

Reserved characters are only encoded when they're used as data, not as delimiters. A ? starting a query string stays as ?, but a ? inside a parameter value becomes %3F.

Common Encodings

Character	Encoded	Notes
Space	`%20` or `+`	`+` only valid in query strings
`&`	`%26`	Separates query parameters
`=`	`%3D`	Separates key from value
`?`	`%3F`	Starts query string
`/`	`%2F`	Path separator
`#`	`%23`	Fragment identifier
`%`	`%25`	The escape character itself
`+`	`%2B`	Often confused with space

Where You'll See This

Query strings - ?search=hello%20world&page=1
Form submissions - application/x-www-form-urlencoded content type
API requests - Encoding parameters in REST calls
Redirects - Encoding callback URLs in OAuth flows
File paths - Spaces and special chars in filenames

Example: Building a Search URL

Base URL:    https://example.com/search
Query:       C++ programming & design
Full URL:    https://example.com/search?q=C%2B%2B%20programming%20%26%20design

Breaking it down:

C++ becomes C%2B%2B (+ is reserved)
Spaces become %20
& becomes %26 (otherwise it starts a new parameter)

Common Gotchas

⚠️Double Encoding

If you encode an already-encoded URL, %20 becomes %2520. Always decode first if you're not sure, then encode once.

ℹ️Space: %20 vs +

In query strings, spaces can be %20 or +. The + convention comes from HTML forms. Use %20 to be safe—it works everywhere.

Don't encode the whole URL - Only encode parameter values, not the entire URL structure.
UTF-8 first - Non-ASCII characters must be UTF-8 encoded before percent encoding. cafe becomes caf%C3%A9.
Path vs query - Some characters are safe in paths but not in query strings. + is literal in paths but means space in queries.
JavaScript gotcha - encodeURI() and encodeURIComponent() do different things. Usually you want encodeURIComponent().

encodeURI vs encodeURIComponent

Function	Encodes	Use For
`encodeURI()`	Spaces, non-ASCII	Entire URLs (preserves structure)
`encodeURIComponent()`	Everything except `A-Z a-z 0-9 - _ . ! ~ * ' ( )`	Individual parameters

javascript

const param = "hello world?";

encodeURI(param)           // "hello%20world?"  (? not encoded!)
encodeURIComponent(param)  // "hello%20world%3F"  (? encoded)

In Code

javascript

// Encode a parameter value
const encoded = encodeURIComponent("hello world & goodbye");
// "hello%20world%20%26%20goodbye"

// Decode
const decoded = decodeURIComponent("hello%20world");
// "hello world"

// Build a URL safely
const url = new URL("https://example.com/search");
url.searchParams.set("query", "C++ & Java");
url.toString();
// "https://example.com/search?query=C%2B%2B+%26+Java"

// URLSearchParams handles encoding automatically
const params = new URLSearchParams({ name: "John Doe", emoji: "smile" });
params.toString();  // "name=John+Doe&emoji=%F0%9F%98%8A"

Try It

Encode/Decode URLs

"URL encoding: where a simple space becomes three characters, and everyone argues about plus signs."