URL Encoder and Decoder: Complete Guide 2025

URL encoding is fundamental to modern web development. In this guide, you’ll learn everything about URL encoding, when to use it, and how to avoid common mistakes.

What is URL Encoding?

URL encoding (also called percent-encoding) converts special characters into a format that can be safely transmitted in URLs. Characters are represented using the % symbol followed by two hexadecimal digits.

Basic Example

Original text: "Hello World"
URL encoded: "Hello%20World"

The space becomes %20 because URLs cannot contain spaces.

Why Do We Need to Encode URLs?

Reserved Characters

Some characters have special meaning in URLs:

• ? - Starts query string
• & - Separates parameters
• = - Assigns values
• / - Separates paths
• # - Marks fragments
• : - Separates scheme and host

If you want to use these characters as data (not as part of the structure), you must encode them.

Problematic Example

// ❌ WRONG - The & breaks the URL
const url = 'https://api.com/search?q=Tom&Jerry';
// Interpreted as two parameters: q=Tom and Jerry=undefined

// ✅ CORRECT - Encoded
const url = 'https://api.com/search?q=Tom%26Jerry';
// Correctly interpreted as: q="Tom&Jerry"

encodeURI vs encodeURIComponent

JavaScript offers two encoding functions. It’s crucial to know when to use each one.

encodeURI()

Use: Encode complete URLs

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

const url = 'https://example.com/search?q=hello world';
const encoded = encodeURI(url);
console.log(encoded);
// https://example.com/search?q=hello%20world

✅ Use for: Complete URLs where you want to preserve structure

❌ DON’T use for: Individual parameter values

encodeURIComponent()

Use: Encode URL components (parameters, values)

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

const param = 'Tom & Jerry';
const encoded = encodeURIComponent(param);
console.log(encoded);
// Tom%20%26%20Jerry

✅ Use for: Query parameters, values, path segments

❌ DON’T use for: Complete URLs (will break : and /)

Side-by-Side Comparison

const text = 'https://example.com?q=hello&goodbye';

encodeURI(text);
// https://example.com?q=hello&goodbye
// Preserves URL structure

encodeURIComponent(text);
// https%3A%2F%2Fexample.com%3Fq%3Dhello%26goodbye
// Encodes EVERYTHING - for use as parameter

Common Use Cases

1. Query Strings

const name = 'Mary Jane';
const city = 'São Paulo';

const url = `https://api.com/search?name=${encodeURIComponent(name)}&city=${encodeURIComponent(city)}`;

console.log(url);
// https://api.com/search?name=Mary%20Jane&city=S%C3%A3o%20Paulo

2. API Paths

const userId = '[email protected]';
const url = `https://api.com/users/${encodeURIComponent(userId)}/profile`;

console.log(url);
// https://api.com/users/user%40example.com/profile

3. OAuth and Redirects

const callbackUrl = 'https://myapp.com/auth/callback?session=abc123';
const oauthUrl = `https://provider.com/oauth?redirect_uri=${encodeURIComponent(callbackUrl)}`;

console.log(oauthUrl);
// https://provider.com/oauth?redirect_uri=https%3A%2F%2Fmyapp.com%2Fauth%2Fcallback%3Fsession%3Dabc123

4. Searches with Special Characters

const query = 'C++ & Java';
const searchUrl = `https://search.com?q=${encodeURIComponent(query)}`;

console.log(searchUrl);
// https://search.com?q=C%2B%2B%20%26%20Java

Character Reference Table

Commonly Encoded Characters

Character	Encoded	Description
(space)	%20	Space
!	%21	Exclamation
#	%23	Hash/Fragment
$	%24	Dollar sign
&	%26	Ampersand
'	%27	Single quote
(	%28	Open parenthesis
)	%29	Close parenthesis
*	%2A	Asterisk
+	%2B	Plus sign
,	%2C	Comma
/	%2F	Forward slash
:	%3A	Colon
;	%3B	Semicolon
=	%3D	Equals
?	%3F	Question mark
@	%40	At sign
[	%5B	Open bracket
]	%5D	Close bracket

Decoding URLs

decodeURI()

const encoded = 'https://example.com/search?q=hello%20world';
const decoded = decodeURI(encoded);
console.log(decoded);
// https://example.com/search?q=hello world

decodeURIComponent()

const encoded = 'Tom%20%26%20Jerry';
const decoded = decodeURIComponent(encoded);
console.log(decoded);
// Tom & Jerry

Common Errors and Solutions

Error 1: Double Encoding

// ❌ WRONG
const text = 'Hello World';
const doubled = encodeURIComponent(encodeURIComponent(text));
console.log(doubled);
// Hello%2520World (double encoded)

// ✅ CORRECT
const correct = encodeURIComponent(text);
// Hello%20World

Error 2: Not Encoding Parameters

// ❌ WRONG - Unencoded parameter
const url = `https://api.com/search?q=${searchTerm}`;

// ✅ CORRECT
const url = `https://api.com/search?q=${encodeURIComponent(searchTerm)}`;

Error 3: Encoding Entire URL

// ❌ WRONG - Full URL with encodeURIComponent
const url = encodeURIComponent('https://example.com/path?param=value');
// Breaks the URL

// ✅ CORRECT - Only encode necessary parts
const param = encodeURIComponent('special value');
const url = `https://example.com/path?param=${param}`;

Error 4: Spaces as +

In HTML forms, spaces are sometimes encoded as + instead of %20:

// HTML form may send:
'name=John+Doe'

// To decode:
const decoded = decodeURIComponent('name=John+Doe'.replace(/\+/g, ' '));
// name=John Doe

Use Our URL Encoder Tool

Our URL Encoding Tool makes this easy:

Features

✅ Two Encoding Modes

• encodeURIComponent - For query parameters, path segments
• encodeURI - For complete URLs preserving structure

✅ Encode and Decode

• Convert text to URL format
• Decode encoded URLs

✅ Reference Table

• See how each special character encodes
• Learn which characters need encoding

✅ Practical Examples

• View common use cases
• Copy and adapt for your projects

✅ 100% Client-Side

• Local processing in your browser
• Nothing sent to servers
• Completely private and secure

URL Encoding in Other Languages

Python

from urllib.parse import quote, unquote, quote_plus

# Equivalent to encodeURIComponent
encoded = quote('Hello World', safe='')
print(encoded)  # Hello%20World

# Decode
decoded = unquote(encoded)
print(decoded)  # Hello World

# For forms (space as +)
form_encoded = quote_plus('Hello World')
print(form_encoded)  # Hello+World

PHP

// Equivalent to encodeURIComponent
$encoded = rawurlencode('Hello World');
echo $encoded; // Hello%20World

// Decode
$decoded = rawurldecode($encoded);
echo $decoded; // Hello World

// For complete URLs
$url = 'https://example.com/search?q=' . urlencode('hello world');

Java

import java.net.URLEncoder;
import java.net.URLDecoder;

// Encode
String encoded = URLEncoder.encode("Hello World", "UTF-8");
System.out.println(encoded); // Hello+World

// Decode
String decoded = URLDecoder.decode(encoded, "UTF-8");
System.out.println(decoded); // Hello World

Best Practices

✅ Always Encode

1. Query parameters - Values after ? and &
2. User data - Any user input
3. Special characters - &, =, +, #, etc.
4. Dynamic paths - Generated URL segments

❌ DON’T Encode

1. Hardcoded URLs - If already well-formed
2. Safe characters - A-Z, a-z, 0-9, -, _, ., ~
3. Multiple times - Avoid double encoding

Security Tips

🔒 Server Validation:

// Client encodes
const url = `/api/users/${encodeURIComponent(userId)}`;

// Server MUST validate
app.get('/api/users/:id', (req, res) => {
  const userId = decodeURIComponent(req.params.id);
  
  // ✅ Validate format
  if (!/^[a-zA-Z0-9@._-]+$/.test(userId)) {
    return res.status(400).send('Invalid user ID');
  }
  
  // Process safely
});

Related Tools

Besides the URL encoder, we have:

• Base64 Encoder - For binary data
• JWT Decoder - Analyze tokens
• JSON Formatter - Validate and format JSON
• Password Generator - Secure passwords

Try the URL Encoder

Ready to encode and decode URLs? Use our free URL Tool:

• 🔗 Encode/decode URLs and components
• ⚡ Instant processing
• 🎯 Two modes: full URI and components
• 📚 Character reference table
• 🔒 100% private (local processing)
• 💯 Free forever

Quick Summary

URL encoding is essential for:

• ✅ Passing data in query strings
• ✅ Building dynamic API paths
• ✅ Handling special characters
• ✅ Preventing parsing errors

Golden rules:

1. Use encodeURIComponent() for individual values
2. Use encodeURI() for complete URLs
3. Always encode user input
4. Never encode twice
5. Always validate on the server

Try our URL tool now! 🚀

---

Need to encode a URL? Use our free encoder!