🔗 URL Encoder / Decoder: `encodeURI` vs `encodeURIComponent`, finally side by side

⚡ 10-second version

Two encoding functions exist, they differ on exactly eleven characters, and picking the wrong one silently breaks your URL. tooladda.online/url-encoder-decoder.html shows you both outputs at once so you can see the difference instead of guessing.

❗ Important

URLs you're debugging often carry tokens, session IDs and customer identifiers. Encoding here happens locally — paste a real URL without shipping its query string to anyone.

---

🎯 The eleven characters that decide everything

encodeURI is for a whole URL. encodeURIComponent is for one piece going inside a URL. Both leave letters, digits and - _ . ! ~ * ' ( ) alone. They differ on precisely these:

Char	encodeURI	encodeURIComponent	Why it matters
/	/	%2F	Path separator — must survive in a URL, must be escaped inside a parameter
?	?	%3F	Starts the query string
&	&	%26	Separates parameters — the #1 bug
=	=	%3D	Separates key from value
#	#	%23	Starts the fragment; everything after it is never sent to the server
:	:	%3A	Scheme and port separator
@	@	%40	Userinfo separator
+	+	%2B	Means "space" in form encoding — see below
; , $	unchanged	%3B %2C %24	Reserved sub-delimiters

The bug this table prevents

A user searches for fish & chips. You build:

❌ /search?q=fish & chips                    →  q = "fish "  and a stray param " chips"
❌ /search?q=fish%20&%20chips                →  same problem, & is still a separator
✅ /search?q=fish%20%26%20chips              →  q = "fish & chips"   ✔

The rule that always works: encodeURIComponent on each key and each value, then assemble with ?, & and = yourself. Never encodeURI a URL that already has user data in it — it leaves & intact, so a value containing & splits into two parameters and your data quietly changes shape.

+ vs %20, the other classic

Context	Space encoded as
URL path and query per RFC 3986	%20
HTML form posts (application/x-www-form-urlencoded)	+

So ?q=a+b may mean "a b" or literally "a+b" depending on what's parsing it. Both encodeURI and encodeURIComponent produce %20 — which is why a literal + sign in your data must be sent as %2B, or it'll be read back as a space.

⚠️ Warning

Double encoding is the other trap: encoding an already-encoded string turns %20 into %2520, and the receiver decodes once to get a literal %20 in your data. If you see %25 in a URL, something has been encoded twice.

---

🧭 How it works

---

✨ What's inside

### ⚖️ Both encoders at once See `encodeURI` and `encodeURIComponent` output together. The difference between them stops being trivia the moment you can see it on your own string.	### 📋 Query string breakdown Paste a monstrous URL and get a clean table of parameters, each value decoded — the fastest way to read a redirect or an OAuth callback.
### 🔍 Decode with double-encoding detection Spot `%2520` and friends immediately, instead of wondering why your parameter contains a literal `%20`.	### 🌐 Correct UTF-8 handling Non-ASCII text, emoji and Indic scripts encode to proper multi-byte percent sequences rather than mojibake.

---

🛠️ Real jobs

Situation	What you do
🐛 A parameter arrives truncated	Almost always an unescaped & in the value. Encode the value properly.
🔐 OAuth redirect_uri rejected	The whole redirect URL must be encodeURIComponent'd as one parameter value.
📊 Building UTM links	Campaign names with spaces or & need encoding, or your analytics splits them.
🔍 Reading a giant redirect URL	Split and decode it to see where it's actually sending you.
🧪 Debugging an API call	Confirm what the server received versus what you meant to send.
🌏 Non-English text in URLs	Verify the UTF-8 percent sequences are right.

---

📖 Four steps

1.  Open   →  tooladda.online/url-encoder-decoder.html
2.  Paste  →  your URL or the single value you're embedding
3.  Read   →  both encoder outputs, side by side
4.  Copy   →  encodeURIComponent for values; assemble ? & = yourself

▶ Open it — tooladda.online/url-encoder-decoder.html

💡 Tip

In real code, don't hand-build query strings at all — use URLSearchParams (JS), urlencode (PHP) or urllib.parse.urlencode (Python). They apply the right rules per component automatically. Use this tool to understand and debug what they produce.

---

❓ FAQ

Is it free? Is my URL uploaded?

Free, no signup, and nothing is uploaded — encoding happens in your browser.

Which function should I use?

encodeURIComponent for individual keys and values — that's the answer roughly 95% of the time. encodeURI only when you have a complete URL containing no user-supplied data.

Why did my parameter get cut off?

An unescaped & or = inside the value. encodeURI leaves both alone, so the parser treats them as structure.

Space: + or %20?

%20 for URLs; + only within HTML form encoding. A literal plus sign in data must be %2B.

What causes %2520 to appear?

Double encoding — the string was encoded twice. % became %25, so %20 became %2520.

Does the fragment (#...) reach the server?

No. Browsers never send the fragment. If a value containing # isn't escaped, everything after it silently vanishes server-side.

Is this the same as Base64?

No. Percent-encoding makes text safe for URL syntax. Base64 re-represents binary as ASCII. Different jobs entirely — and neither is encryption.

---

🔬 Under the hood

• Uses the browser's native encodeURI / encodeURIComponent / decodeURIComponent, so output matches your JavaScript exactly.
• Query string parsing surfaces per-parameter decoded values.
• Correct multi-byte UTF-8 percent-encoding; malformed sequences are reported rather than silently mangled.
• Works offline once loaded.

---

Originally published on ToolAdda, where URL Encoder / Decoder runs free in your browser — nothing is uploaded, nothing leaves your device.