URL Encode Decode — Complete Guide to Percent Encoding 2026

What is URL Encoding?

URL encoding (also called percent encoding) is the process of converting characters into a format that can be safely transmitted in a URL. Special characters are replaced with a % followed by two hexadecimal digits representing the character's ASCII code.

Why URL Encode?

URLs have a limited character set. Certain characters have special meanings in URLs and must be encoded when used as data:

Reserved Characters

Common Use Cases

• Query Parameters: Encoding user input in search queries
• URL Paths: Including special characters in file names
• Form Data: Sending form submissions via GET requests
• API Calls: Passing encoded data in REST API URLs
• CSS/JS in URLs: Embedding data URIs

How to URL Encode

Using JavaScript

// Encode a URL component
const text = "Hello World!";
const encoded = encodeURIComponent(text);
console.log(encoded); // Hello%20World!

// Decode a URL component
const decoded = decodeURIComponent(encoded);
console.log(decoded); // Hello World!

encodeURI() vs encodeURIComponent()

JavaScript provides two encoding functions with different purposes:

const url = "https://example.com/search?q=hello world";

// encodeURI - preserves URL structure
console.log(encodeURI(url));
// https://example.com/search?q=hello%20world

// encodeURIComponent - encodes everything
console.log(encodeURIComponent(url));
// https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world

Using Python

from urllib.parse import quote, unquote, quote_plus

# Encode
text = "Hello World!"
encoded = quote(text)
print(encoded)  # Hello%20World!

# Encode with spaces as +
encoded_plus = quote_plus(text)
print(encoded_plus)  # Hello+World!

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

Using Online Tools

1. Copy your text or URL
2. Paste into an online URL encoder
3. Click "Encode" or "Decode"
4. Copy the result

Common Character Encoding Table

Practical Examples

Search Query URLs

// User searches for "javascript tutorial"
const searchTerm = "javascript tutorial";
const url = `https://google.com/search?q=${encodeURIComponent(searchTerm)}`;
console.log(url);
// https://google.com/search?q=javascript%20tutorial

Social Sharing URLs

const shareUrl = "https://example.com/article";
const title = "10 Tips for Better Code";
const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(title)}`;
// https://twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com%2Farticle&text=10%20Tips%20for%20Better%20Code

Email Links

const subject = "Question about your product";
const body = "Hi, I have a question...";
const mailtoUrl = `mailto:[email protected]?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;

Common Mistakes

Double Encoding

Encoding already-encoded text results in incorrect output:

const text = "Hello World";
const encoded = encodeURIComponent(text); // Hello%20World
const doubleEncoded = encodeURIComponent(encoded); // Hello%2520World (WRONG!)

Encoding Entire URLs

Don't encode the entire URL — only encode the dynamic parts:

// WRONG
const wrong = encodeURIComponent("https://example.com/search?q=hello");
// https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello

// CORRECT
const correct = `https://example.com/search?q=${encodeURIComponent("hello")}`;
// https://example.com/search?q=hello

Plus (+) vs %20 for Spaces

In query strings, spaces can be encoded as + or %20:

• application/x-www-form-urlencoded (form data): use +
• Regular URL encoding: use %20

Best Practices

1. Encode only user input — Don't encode the entire URL
2. Use encodeURIComponent for parameters — It's safer
3. Decode before displaying — Show human-readable text to users
4. Handle encoding errors — Use try-catch blocks
5. Be consistent — Use the same encoding throughout your app

Frequently Asked Questions

What's the Difference Between URL Encoding and HTML Encoding?

URL encoding is for URLs (%20 for spaces), while HTML encoding is for HTML content (  for spaces).

How to Decode + Sign in URLs?

In query strings, + represents a space. Use proper decoding:

// JavaScript
const decoded = decodeURIComponent("hello+world".replace(/\+/g, ' '));
// Output: "hello world"

Can URL Encoding Handle Non-ASCII Characters?

Yes! UTF-8 characters are encoded as multiple percent-encoded bytes:

encodeURIComponent("你好");
// Output: %E4%BD%A0%E5%A5%BD

Conclusion

URL encoding is essential for safely transmitting data in URLs. Whether you're building search queries, API endpoints, or email links, understanding percent encoding prevents bugs and security issues.

Use our free URL encoder/decoder for quick encoding and decoding of your URLs.

Related Tools: Base64 Encoder · HTML Encoder · JWT Decoder · Query String Parser