URL Encoding & Decoding: The Complete Guide

URL encoding (also called percent encoding) is the process of converting characters into a format that can be transmitted over the internet. If you've ever seen %20 in a URL, that's URL encoding at work—it represents a space character.

What is URL Encoding?

URLs can only contain a limited set of ASCII characters. Special characters, spaces, and non-ASCII characters must be encoded using percent-encoding.

Original:  Hello World!
Encoded:   Hello%20World%21

Original:  email=user@example.com&name=John Doe
Encoded:   email=user%40example.com&name=John%20Doe

Common Encoded Characters

Space → %20 or +
!     → %21
"     → %22
#     → %23
$     → %24
%     → %25
&     → %26
'     → %27
(     → %28
)     → %29
*     → %2A
+     → %2B
,     → %2C
/     → %2F
:     → %3A
;     → %3B
=     → %3D
?     → %3F
@     → %40
[     → %5B
]     → %5D

URL Component Encoding

JavaScript

// encodeURIComponent (for query parameters)
const param = "Hello World & Friends";
const encoded = encodeURIComponent(param);
// "Hello%20World%20%26%20Friends"

// encodeURI (for full URLs)
const url = "https://example.com/search?q=Hello World";
const encoded = encodeURI(url);
// "https://example.com/search?q=Hello%20World"

// Decoding
const decoded = decodeURIComponent(encoded);

When to Use Which?

• encodeURIComponent: Query parameters, path segments
• encodeURI: Full URLs (preserves :, /, ?)

Common Mistakes

Mistake #1: Double Encoding

// WRONG
const param = encodeURIComponent(encodeURIComponent("Hello World"));
// "Hello%2520World" (double encoded!)

// RIGHT
const param = encodeURIComponent("Hello World");
// "Hello%20World"

Mistake #2: Not Encoding at All

// WRONG (breaks with spaces/special chars)
const url = `https://api.com/search?q=${searchTerm}`;

// RIGHT
const url = `https://api.com/search?q=${encodeURIComponent(searchTerm)}`;

Conclusion

URL encoding is essential for web development. Always encode query parameters, decode when reading them, and use the right function for the job.

← Back to Blog