URL Encoder & Decoder

The Need for URL Encoding

URLs are designed to work with a limited set of ASCII characters. However, modern applications often need to include a wide range of characters in URLs, including:

• Special characters like spaces, ampersands, question marks
• International characters from non-English languages
• Symbols and punctuation that have special meaning in URLs
• Binary data or control characters

Without encoding, these characters could break URL syntax or be interpreted incorrectly by servers. URL encoding solves this by representing these characters in a format that's safe for URLs.

Reserved Characters in URLs

Certain characters have special meanings in URLs and must be encoded when used as part of data:

URL Encoding Process

The URL encoding process follows these steps:

1. The character to be encoded is first converted to its UTF-8 byte representation
2. Each byte is then represented as a percent sign (%) followed by two hexadecimal digits
3. Alphanumeric characters (A-Z, a-z, 0-9) and a few special characters (-._~) are typically left as-is
4. Spaces can be encoded as %20 or + (the plus sign), depending on the context

Original: Hello World & Welcome!
Encoded:  Hello%20World%20%26%20Welcome%21

Original: https://example.com/search?q=URL encoding
Encoded:  https%3A%2F%2Fexample.com%2Fsearch%3Fq%3DURL%20encoding

URL Encoding in Different Contexts

1. Form Submissions

When HTML forms are submitted with application/x-www-form-urlencoded content type (the default), spaces are typically encoded as plus signs (+) rather than %20. This is a historical convention that's still widely used.

// Original form data
name = "John Doe"
query = "url encoding & decoding"

// Form encoded
name=John+Doe&query=url+encoding+%26+decoding

2. Query Parameters

Query parameters in URLs must be properly encoded to maintain the structure of the URL:

// Original URL with unencoded parameters
https://example.com/search?q=What is URL encoding?&lang=en

// Properly encoded URL
https://example.com/search?q=What%20is%20URL%20encoding%3F&lang=en

3. Path Segments

When including variable data in the path portion of a URL, encoding is also necessary:

// Original path with problematic characters
https://example.com/files/my document.pdf

// Properly encoded path
https://example.com/files/my%20document.pdf

URL Encoding Standards and Specifications

URL encoding has evolved over time through several RFC (Request for Comments) specifications:

Common URL Encoding Mistakes

URL Encoding in Different Programming Languages

// Encoding
const encoded = encodeURIComponent('Hello World & Welcome!');
console.log(encoded); // "Hello%20World%20%26%20Welcome%21"

// Decoding
const decoded = decodeURIComponent('Hello%20World%20%26%20Welcome%21');
console.log(decoded); // "Hello World & Welcome!"

// Note: encodeURI() is also available but doesn't encode characters like ?, =, &
// Use encodeURIComponent() for query parameters or any URL parts

// Encoding
$encoded = urlencode('Hello World & Welcome!');
echo $encoded; // "Hello+World+%26+Welcome%21"

// For RFC 3986 compliant encoding (with %20 for spaces)
$rfc3986 = rawurlencode('Hello World & Welcome!');
echo $rfc3986; // "Hello%20World%20%26%20Welcome%21"

// Decoding
$decoded = urldecode('Hello+World+%26+Welcome%21');
echo $decoded; // "Hello World & Welcome!"

import urllib.parse

# Encoding
encoded = urllib.parse.quote('Hello World & Welcome!')
print(encoded)  # "Hello%20World%20%26%20Welcome%21"

# For form data (spaces as +)
form_encoded = urllib.parse.quote_plus('Hello World & Welcome!')
print(form_encoded)  # "Hello+World+%26+Welcome%21"

# Decoding
decoded = urllib.parse.unquote('Hello%20World%20%26%20Welcome%21')
print(decoded)  # "Hello World & Welcome!"

Security Considerations

Proper URL encoding is not just about functionality—it's also a security measure:

Conclusion

URL encoding is a critical aspect of web development that ensures data can be safely transmitted through URLs. Understanding when and how to properly encode URLs prevents both functional issues and security vulnerabilities. While the concept is simple—replacing unsafe characters with percent-encoded equivalents—the details of which characters need encoding in which contexts can be complex. Using standardized encoding functions in your programming language of choice, rather than attempting manual encoding, is generally the safest approach.