URL Encoder Decoder: Complete Percent Encoding Guide

URLs can only contain certain characters. Try to put a space in a URL—it breaks. Special characters like @, &, ?, # have special meaning. This is where URL encoding comes in. URL encoding (also called percent-encoding) transforms unsafe characters into a format URLs can safely transmit. Our URL encoder decoder makes this process instant and error-free.

This guide explains why URL encoding matters, how it works, common encoding scenarios, and best practices for handling URLs safely across different contexts. Use our free URL encoder to ensure your URLs are properly formatted.

Why URL Encoding Matters

URLs have strict character requirements defined by RFC 3986. Only certain characters are "safe" to include literally in a URL:

Safe characters (unreserved): A-Z, a-z, 0-9, - _ . ~ Reserved characters (special meaning): : / ? # [ ] @ ! $ & ' ( ) * + , ; = Unsafe characters (must be encoded): Space, <, >, {, }, |, \, ^, ", %

Problem: What happens if you want to search for "hello world" in a URL?

❌ Wrong: https://example.com/search?q=hello world ✅ Right: https://example.com/search?q=hello%20world

How URL Encoding Works

URL encoding follows a simple formula: convert unsafe characters to percent-encoded format.

Process:

Take the character (e.g., space: " ")
Convert to UTF-8 byte representation (e.g., 0x20)
Represent as % followed by two hexadecimal digits (e.g., %20)

Character → UTF-8 → Percent-Encoded Space → 0x20 → %20 & → 0x26 → %26 ? → 0x3F → %3F # → 0x23 → %23 @ → 0x40 → %40 ! → 0x21 → %21 " → 0x22 → %22 % → 0x25 → %25

Common URL Encoding Scenarios

Query Parameters with Spaces

Search: "machine learning" Encoded: https://example.com/search?q=machine%20learning

Special Characters in Parameters

Email: john@example.com Encoded: john%40example.com Price filter: >$100 Encoded: %3E%24100

International Characters (UTF-8)

Character: café Encoded: caf%C3%A9 Character: 日本 Encoded: %E6%97%A5%E6%9C%AC

Plus as Space (Form Data)

In HTML form data (application/x-www-form-urlencoded), spaces can be encoded as "+" instead of "%20":

Query string: hello+world Decodes to: hello world Modern practice: Use %20 instead (clearer)

Encoding Different URL Components

Important: Different URL components have different encoding rules.

Full URL encoding (encodeURI in JavaScript): https://example.com/search?q=hello world&sort=date → https://example.com/search?q=hello%20world&sort=date Note: Does NOT encode / or ? (preserves structure) Component encoding (encodeURIComponent): hello world&sort=date → hello%20world%26sort%3Ddate Note: DOES encode / ? & = (treats as data)

Programming Examples

JavaScript

// For URL components (query parameters, etc.) const encoded = encodeURIComponent("hello world"); console.log(encoded); // hello%20world const decoded = decodeURIComponent("hello%20world"); console.log(decoded); // hello world // Full URLs (preserves / ? : etc.) const url = "https://example.com/search?q=hello world"; const encoded = encodeURI(url); console.log(encoded); // https://example.com/search?q=hello%20world

Python

from urllib.parse import quote, unquote # Encode component encoded = quote("hello world") print(encoded) # hello%20world # Decode decoded = unquote("hello%20world") print(decoded) # hello world # Safe characters (don't encode these) encoded = quote("hello/world", safe="/") print(encoded) # hello/world (preserves /)

PHP

<?php // Encode echo urlencode("hello world"); // hello+world (legacy, form data) echo rawurlencode("hello world"); // hello%20world (RFC-compliant) // Decode echo urldecode("hello+world"); // hello world echo rawurldecode("hello%20world"); // hello world ?>

Common Mistakes

❌ Mixing encoded and unencoded data (inconsistent)
❌ Using + for spaces in modern URLs (outdated, use %20)
❌ Double-encoding (encoding already-encoded data)
❌ Not encoding special characters in query parameters
❌ Encoding entire URLs instead of components
❌ Assuming ASCII-only URLs (international characters need encoding)

URL Encoding Best Practices

✅ Always encode user input in URLs
✅ Use encodeURIComponent for query parameters
✅ Use encodeURI for complete URLs
✅ Decode before displaying to users
✅ Handle UTF-8 properly for international characters
✅ Use URL class in modern JavaScript for reliable parsing

Real-World Example

// Building a search URL in JavaScript const searchTerm = "C++ programming"; const sortBy = "relevance"; const filter = "author:John Smith"; // Wrong: Concatenating directly const badUrl = `search.php?q=${searchTerm}&sort=${sortBy}&filter=${filter}`; // Result: search.php?q=C++ programming&sort=relevance&filter=author:John Smith // Problem: Spaces, +, and : break the URL // Right: Using encodeURIComponent const goodUrl = `search.php?q=${encodeURIComponent(searchTerm)}&sort=${encodeURIComponent(sortBy)}&filter=${encodeURIComponent(filter)}`; // Result: search.php?q=C%2B%2B%20programming&sort=relevance&filter=author%3AJohn%20Smith // Safe and parseable

Key Takeaways

URLs need encoding: Unsafe characters must be percent-encoded
Percent-encoding format: % followed by hexadecimal character code
Component vs. full URL: encodeURIComponent for data, encodeURI for URLs
Automatic handling: Modern frameworks handle encoding automatically
Always encode user input: Security best practice to prevent URL injection

Next Steps

Test URL encoding with our URL encoder decoder online
Review your code for proper encoding of user input
Learn the difference between encodeURI and encodeURIComponent
Compare with URL encoding vs HTML encoding
Implement URL encoding in your API clients
Test with special characters and international text

URL encoding is fundamental to web development. Mastering it prevents bugs, improves URL reliability, and ensures your applications handle user input safely and correctly. Use our free URL encoder to validate your URLs before deployment.