URL Encoding: Why Special Characters Need Escaping

URL Encoding: Why Special Characters Need Escaping

Ever seen %20 in a URL and wondered what it means? That's URL encoding—a way to represent special characters safely in web addresses. Understanding it prevents bugs and security issues.

What Is URL Encoding?

URLs can only contain a limited set of ASCII characters. URL encoding (also called percent-encoding) converts unsafe characters into a safe format:

  • Space → %20
  • & → %26
  • = → %3D
  • ? → %3F

The % is followed by two hexadecimal digits representing the character's ASCII code.

Try it with our URL encoder/decoder.

Why Encoding Is Necessary

URL Structure Uses Special Characters

URLs have meaningful characters:

  • ? separates path from query string
  • & separates query parameters
  • = assigns values to parameters
  • / separates path segments

If your data contains these characters, they must be encoded to avoid confusion:

// Without encoding (broken)
?search=cats & dogs

// With encoding (correct)
?search=cats%20%26%20dogs

Non-ASCII Characters

URLs originally supported only ASCII. Characters like é, ñ, or Chinese characters need encoding:

café → caf%C3%A9

Characters That Need Encoding

Always Encode

  • Space: %20 (or + in some contexts)
  • Punctuation: !, #, $, &, ', (, ), *, +
  • Reserved: :, ;, =, ?, @
  • Non-ASCII: Any character above ASCII 127

Safe Characters (No Encoding Needed)

  • Letters: A-Z, a-z
  • Numbers: 0-9
  • Some special: - _ . ~

When to Encode

Query Parameters

const query = encodeURIComponent("search term with spaces");
const url = `https://example.com/search?q=${query}`;

Path Segments

const filename = encodeURIComponent("my file (1).pdf");
const url = `/downloads/${filename}`;

User-Provided Data

Any user input that goes into URLs must be encoded to prevent:

  • Broken URLs
  • Injection attacks
  • XSS vulnerabilities

JavaScript Encoding Functions

encodeURIComponent()

Encodes everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( )

Use for: Query parameter values, path segments

encodeURI()

Encodes less aggressively; preserves URL structure characters

Use for: Complete URLs (but be careful)

// Encoding a search query
encodeURIComponent("cats & dogs")  // "cats%20%26%20dogs"

// Encoding a complete URL (rarely needed)
encodeURI("https://example.com/path?q=test")  // unchanged

Decoding URLs

// JavaScript
decodeURIComponent("cats%20%26%20dogs")  // "cats & dogs"

// PHP
urldecode("cats%20%26%20dogs")  // "cats & dogs"

// Python
from urllib.parse import unquote
unquote("cats%20%26%20dogs")  # "cats & dogs"

Common Mistakes

Double Encoding

Encoding already-encoded URLs:

%20 → %2520  // Wrong!

Only encode once.

Not Encoding User Input

Trusting that users won't include special characters leads to bugs and security issues.

Encoding the Entire URL

Don't encode :// or / in the URL structure—only encode the data portions.

Space Encoding Confusion

  • %20 is the standard encoding
  • + is valid only in query strings (application/x-www-form-urlencoded)
  • They're not always interchangeable

URL Encoding in Different Contexts

Form Submissions

HTML forms with method="GET" automatically encode field values.

API Requests

Libraries like Axios or fetch handle encoding, but verify for special cases.

Redirects

Encode redirect URLs to prevent open redirect vulnerabilities.

Email Links

Mailto links need proper encoding, especially for subject and body parameters.

Related Tools

Use our URL encoder to safely encode special characters for use in URLs.

Related Articles

← Back to Blog