URL Encoder/Decoder: Complete Guide 2026 — Percent Encoding Explained

#webdev #programming #tools #tutorial

Every URL is encoded. If you've ever seen %20 in a URL and wondered what it means, URL encoding (also called percent encoding) is the mechanism that allows browsers and servers to safely transmit special characters over HTTP.

Characters That Must Be Encoded

Character	Encoded As	Reason
Space	`%20`	Spaces are separators in URLs
`&`	`%26`	Query parameter separator
`/`	`%2F`	Path separator
`%`	`%25`	Escape character itself
`+`	`%2B`	Reserved for spaces in query strings

encodeURIComponent vs encodeURI

// encodeURIComponent — for parameter values
encodeURIComponent("hello world!");  // "hello%20world%21"

// encodeURI — for full URLs (preserves structure)
encodeURI("https://example.com/a b");  // "https://example.com/a%20b"

Common Mistakes

Double encoding: encodeURIComponent(encodeURIComponent("hello")) becomes "hello%2520" — encode once only
Using + for spaces in paths: /users/john+doe — use %20 instead
Not encoding Unicode: Always encode non-ASCII characters

The Bottom Line

Always encode user input before adding to a URL
Use encodeURIComponent for parameter values, encodeURI for complete URLs
Use URLSearchParams for building query strings — it handles encoding automatically
Test with real data — spaces, Unicode, and special characters reveal encoding bugs