URL Encoding: The Developer's Swiss Army Knife You're Probably Using Wrong

Source: Dev.to

TL;DR

encodeURI() = “I’m encoding a complete URL” → keeps structural chars like / ? & #

encodeURIComponent() = “I’m encoding ONE piece of data” → encodes everything except A-Z a-z 0-9 - _ . ! ~ * ' ( )

When Things Go Wrong

Last week I spent an hour debugging a 500 error from a payment gateway. The culprit? I used encodeURI() on a query parameter that contained a # character. The browser interpreted everything after # as a fragment identifier and never sent it to the server. encodeURIComponent() would have caught it.

The 3 Rules I Now Live By

• Query string values → ALWAYS encodeURIComponent(). No exceptions.
• Full URLs → encodeURI(), but only if you’re sure no component contains special chars.
• When in doubt → encodeURIComponent(). Worst case: you encode too much. Best case: you avoid a bug.

A Free Tool for When You’re Lazy

Sometimes I just want to paste a gnarly URL and see what happens — especially when it’s 200 characters long and I don’t want to open DevTools. I built a free URL encoder/decoder that runs entirely in the browser. No uploads, no ads, no signup. Just paste and encode.