Introduction

Have you ever wondered what happens when you type special characters in a web address? Or how your browser handles spaces, symbols, and other non-standard characters in URLs? The answer lies in URL encoding.

In this guide, you'll learn everything you need to know about URL encoding, from basic concepts to practical implementation in various programming languages.

What is URL Encoding?

URL encoding (also known as percent-encoding) is a mechanism used to convert unsafe or reserved characters into a format that can be safely transmitted over the internet. It replaces unsafe characters with a percent sign (%) followed by two hexadecimal digits that represent the character's ASCII code.

For example, a space character becomes %20 and an exclamation mark becomes %21.

Why Do We Need URL Encoding?

URLs have a specific structure and can only contain a limited set of characters. The safe characters in URLs are:

• Alphanumeric characters: A-Z, a-z, 0-9
• Special characters: - (hyphen), _ (underscore), . (period), ~ (tilde)

Reserved characters like ?, &, =, /, #, and others have special meanings in URLs. To use these characters as data (not as URL syntax), they must be encoded.

Common URL Encoded Characters

Examples of URL Encoding

URL Encoding in Programming Languages

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

// Decode a URL component
const decoded = decodeURIComponent('Hello%20World%21');
console.log(decoded); // Output: Hello World!

// URL encode a string
$encoded = urlencode('Hello World!');
echo $encoded; // Output: Hello+World%21

// URL decode a string
$decoded = urldecode('Hello+World%21');
echo $decoded; // Output: Hello World!

from urllib.parse import quote, unquote

# URL encode a string
encoded = quote('Hello World!')
print(encoded)  # Output: Hello%20World%21

# URL decode a string
decoded = unquote('Hello%20World%21')
print(decoded)  # Output: Hello World!

import java.net.URLEncoder;
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;

// URL encode a string
String encoded = URLEncoder.encode("Hello World!", StandardCharsets.UTF_8);
System.out.println(encoded); // Output: Hello+World%21

// URL decode a string
String decoded = URLDecoder.decode("Hello+World%21", StandardCharsets.UTF_8);
System.out.println(decoded); // Output: Hello World!

Encoding vs. Decoding

• Encoding: Converting a normal string into a URL-safe format
• Decoding: Converting a URL-encoded string back to its original form

Both operations are essential for proper data transmission in web applications. You encode when building URLs and decode when reading URL parameters.

Best Practices

• Always encode user input before including it in URLs
• Use proper encoding functions provided by your programming language
• Be consistent with encoding across your application
• Handle encoding at the right level - encode individual components, not the entire URL
• Test thoroughly with special characters, spaces, and non-ASCII characters

Common Pitfalls

// Wrong
const doubleEncoded = encodeURIComponent(encodeURIComponent('Hello World!'));

// Right
const singleEncoded = encodeURIComponent('Hello World!');

// Wrong
const bad = encodeURIComponent('https://example.com/search?q=hello world');

// Right
const good = 'https://example.com/search?q=' + encodeURIComponent('hello world');