DEV Community

arenasbob2024-cell
arenasbob2024-cell

Posted on • Originally published at viadreams.cc

URL Encoding Complete Guide: Why %20 Exists and How to Handle It

Every web developer encounters URL encoding. But why does a space become %20? Here is the complete guide.

What Is URL Encoding?

URLs can only use a limited set of ASCII characters. URL encoding converts unsafe characters to %XX format.

Space -> %20
/ -> %2F
? -> %3F
& -> %26
= -> %3D
Enter fullscreen mode Exit fullscreen mode

JavaScript

// For values in query params
encodeURIComponent('hello world & goodbye')
// 'hello%20world%20%26%20goodbye'

// For full URLs (preserves :, /, ?, &)
encodeURI('https://example.com/path?q=hello world')
Enter fullscreen mode Exit fullscreen mode

Rule: Use encodeURIComponent for values, encodeURI for full URLs.

Python

from urllib.parse import quote, quote_plus

quote('hello world')       # 'hello%20world'
quote_plus('hello world')  # 'hello+world'
Enter fullscreen mode Exit fullscreen mode

The Double Encoding Trap

Original:     hello world
Encoded once: hello%20world
Encoded twice: hello%2520world  <- BUG!
Enter fullscreen mode Exit fullscreen mode

If you see %25 in URLs, you are double-encoding.

Try It Online

Encode and decode URLs with DevToolBox URL Encoder - handles all special characters.


Have you been burned by double encoding? Share your story!

Top comments (0)