URL Encoding and Decoding: Complete Developer Guide

URL encoding, also known as percent encoding, is a mechanism for encoding information in URLs. Understanding URL encoding is essential for web developers.

What is URL Encoding?

URL encoding converts characters that are not allowed in URLs into a format that can be transmitted over the Internet. It replaces unsafe ASCII characters with "%" followed by two hexadecimal digits.

Reserved and Unreserved Characters

Unreserved Characters (No Encoding Needed)

A-Z a-z 0-9 - _ . ~

Reserved Characters (Encode When Used in Data)

Character	Encoded	Purpose
&	%26	Query separator
=	%3D	Key-value separator
?	%3F	Query start
/	%2F	Path separator
#	%23	Fragment identifier
+	%2B	Spaces in forms

URL Encoding in Different Languages

JavaScript

// encodeURIComponent - encode query parameters
const encoded = encodeURIComponent('Hello World & Friends');
console.log(encoded); // Hello%20World%20%26%20Friends

// decodeURIComponent - decode
const decoded = decodeURIComponent('Hello%20World');
console.log(decoded); // Hello World

// URLSearchParams - best for query strings
const params = new URLSearchParams();
params.append('name', 'John Doe');
console.log(params.toString()); // name=John+Doe

Python

from urllib.parse import quote, unquote, urlencode

encoded = quote('Hello World & Friends')
print(encoded)  # Hello%20World%20%26%20Friends

decoded = unquote('Hello%20World')
print(decoded)  # Hello World

params = urlencode({'name': 'John Doe'})
print(params)  # name=John+Doe

PHP

<?php
$encoded = rawurlencode('Hello World'); // Hello%20World
$encoded = urlencode('Hello World'); // Hello+World
$decoded = urldecode('Hello%20World'); // Hello World
?>

Space Encoding: %20 vs +

• %20: Standard URL encoding (RFC 3986)
• +: Form encoding (application/x-www-form-urlencoded)

// In query strings, both work
// https://example.com/search?q=hello+world
// https://example.com/search?q=hello%20world

// In URL paths, use %20
// https://example.com/my%20file.txt ✓

Common Pitfalls

1. Double Encoding

// Wrong
const url = encodeURIComponent(encodeURIComponent('Hello World'));
// Hello%2520World (wrong!)

// Correct
const url = encodeURIComponent('Hello World');
// Hello%20World

2. Using encodeURI for Components

// Wrong - encodeURI preserves & and =
const param = encodeURI('name=John&age=30');
// name=John&age=30 (not encoded!)

// Correct
const param = encodeURIComponent('name=John&age=30');
// name%3DJohn%26age%3D30

Best Practices

• Always encode user input in URLs
• Use encodeURIComponent() for query parameters
• Use URLSearchParams for building query strings
• Decode only when necessary for display

Try Our URL Tools

• URL Encoder - Encode URLs and strings
• URL Decoder - Decode percent-encoded strings

Conclusion

URL encoding is a fundamental skill for web developers. Understanding when and how to encode URLs prevents bugs and security vulnerabilities.