What is URL Encoding?

URL encoding (also called percent-encoding) converts characters into a format that can be transmitted over the Internet. URLs can only contain certain characters from the ASCII set.

Why URL Encoding is Necessary

URLs cannot contain spaces or certain special characters. When these characters appear in URLs, they must be encoded:

• Space → %20 or +
• ! → %21
• # → %23
• $ → %24
• & → %26
• = → %3D

encodeURI() vs encodeURIComponent()

encodeURI()

Use for: Encoding complete URLs

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

Example:

• Input: https://example.com/search?q=hello world
• Output: https://example.com/search?q=hello%20world

encodeURIComponent()

Use for: Encoding URL parameters and query strings

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

Example:

• Input: https://google.com
• Output: https%3A%2F%2Fgoogle.com

Common Use Cases

1. Search Queries

When users search for "hello world", it becomes hello%20world in the URL

2. Passing URLs as Parameters

https://example.com?redirect=https%3A%2F%2Fgoogle.com

3. Special Characters in Filenames

document-2025.pdf → document-2025.pdf (already safe)
my file.pdf → my%20file.pdf

4. Form Data

name=John Doe&email=john@example.com

Examples

Best Practices

• Always encode URL parameters when building URLs programmatically
• Use encodeURIComponent() for query string values
• Use encodeURI() for complete URLs
• Don't double-encode URLs
• Decode URLs before displaying to users

FAQ

What's the difference between %20 and +?

Both represent spaces. %20 is the standard encoding, while + is commonly used in query strings (application/x-www-form-urlencoded).

Can I encode the entire URL including http://

Use encodeURI() to preserve the URL structure. Use encodeURIComponent() only for parameter values.

Is URL encoding secure?

URL encoding is for compatibility, not security. It doesn't encrypt data. Use HTTPS for secure transmission.

Why do I see %2F instead of /?

You likely used encodeURIComponent() on a full URL. Use encodeURI() instead to preserve URL structure.