URL Encoding 101: encodeURIComponent vs encodeURI vs rawuriencode

URL Encoding 101: encodeURIComponent vs encodeURI vs rawuriencode The Core Problem URLs have a strict syntax. Only certain characters are allowed unencoded. Everything else must be percent-encoded. ✅ Valid in URLs: A-Z a-z 0-9 - _ . ~ ! ❌ Must be encoded: space, &, =, #, %, /, ?, :, @, $, & Three JavaScript Functions Function Encodes Does NOT Encode encodeURIComponent() Almost everything A-Z a-z 0-9 - _ . ~ ! ' ( ) * encodeURI() Reserved characters A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ~ ! ' ( ) * # When to Use Which // ✅ Use encodeURIComponent for query parameter VALUES const value = encodeURIComponent ( " Hello World " ); // "Hello%20World" const query = `name= ${ value } ` ; // "name=Hello%20World" // ✅ Use encodeURI for the full URL path (when you want to preserve /) const url = encodeURI ( " https://example.com/path/to/page " ); // preserved slashes // ❌ NEVER use encodeURI for query strings (it leaves = ? & unencoded) const bad = encodeURI ( " name=Hello World " ); // "name=Hello