URL Encoding Explained: When and How to Encode URLs Correctly

What Is URL Encoding?

URL encoding (also called percent encoding) converts characters that are not allowed in URLs into a safe format using a % sign followed by two hexadecimal digits. For example, a space becomes %20, an ampersand becomes %26, and a forward slash becomes %2F.

Encode and decode URLs instantly: URL Encoder & Decoder

Why URLs Need Encoding

URLs can only contain a limited set of ASCII characters. The RFC 3986 specification defines which characters are "unreserved" (safe without encoding): A-Z a-z 0-9 - _ . ~

All other characters must be percent-encoded before being included in a URL. This includes spaces, special characters, non-ASCII characters (like accented letters and Chinese characters), and URL-reserved characters when used as data rather than delimiters.

encodeURI vs encodeURIComponent

Code Examples

Correct — encoding a query parameter value:
var search = encodeURIComponent(userInput);
var url = "https://api.example.com/search?q=" + search;

Wrong — using encodeURI for a parameter value:
// encodeURI leaves & and = intact — breaks query strings
var url = "https://api.example.com?q=" + encodeURI("bread & butter");
// Result: ?q=bread%20&%20butter — & breaks the query string

Common URL Encoding Mistakes

1. Double Encoding

Encoding an already-encoded string produces %2520 instead of %20 (encoding the % sign). Always decode before re-encoding.

2. Not Encoding Query Values

Passing user input directly into query strings without encoding allows injection attacks and breaks APIs when input contains &, =, or #.

3. Using the Wrong Function

Using encodeURI instead of encodeURIComponent for individual query parameter values leaves characters like & and = unencoded, which breaks the query string structure.

URL Encoding Character Reference

Related Tools

• URL Encoder & Decoder — Encode or decode URLs instantly
• Base64 Encoder — Encode binary data as text
• UTM Builder — Build properly encoded tracking URLs