Question 1

What's the difference between encodeURI and encodeURIComponent?

Accepted Answer

encodeURI() preserves URL structure (keeps : / ? # [ ] @) and is for encoding full URLs. encodeURIComponent() encodes everything except alphanumerics and - _ . ! ~ * ' ( ), making it perfect for query parameters. Example: encodeURI('http://example.com?name=John Doe') keeps the protocol and domain, while encodeURIComponent('John Doe') → 'John%20Doe' for use in query strings.

Question 2

Why do spaces become %20 instead of +?

Accepted Answer

In modern URL encoding (percent-encoding), spaces become %20. The + for spaces is legacy from application/x-www-form-urlencoded (HTML forms). Use %20 for all URL encoding — it's the standard. JavaScript's encodeURIComponent() uses %20. Only use + if you're specifically working with form data encoding.

Question 3

Which characters must be encoded in URLs?

Accepted Answer

Reserved characters (17 total) have special meaning in URLs: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Unsafe characters (like space, <, >, {, }, |, \, ^, `) must always be encoded. Unreserved characters (A-Z, a-z, 0-9, - _ . ~) never need encoding. For query parameters, encode everything except unreserved characters using encodeURIComponent().

Question 4

Can I encode an entire URL at once?

Accepted Answer

No! Never run encodeURIComponent() on a full URL—it will encode the protocol (http://) and break the URL. Only encode the dynamic parts (query values, path segments). Use encodeURI() for full URLs (preserves structure) or encodeURIComponent() for individual pieces. Example: Right: 'http://example.com?q=' + encodeURIComponent('search term'). Wrong: encodeURIComponent('http://example.com?q=search term').

Question 5

What is double encoding and how do I avoid it?

Accepted Answer

Double encoding happens when you encode already-encoded data. Example: 'Hello World' → '%20Hello%20World' → '%2520Hello%2520World'. The % gets encoded to %25. This breaks URLs. To avoid: 1) Check if data is already encoded (contains %). 2) Decode before re-encoding. 3) Track encoding state in your code. 4) Never blindly encode without checking.

Feature	encodeURI()	encodeURIComponent()
Purpose	Encode full URL	Encode URL parts
Preserves	: / ? # [ ] @	Only A-Z 0-9 - _ . ! ~ * ' ( )
Use case	Complete URLs	Query params, path segments

URL Encoder/Decoder

URL Encoding Explained

💡 Expert Tip: Don't Encode the Entire URL

⚠️ Common Mistakes

1. Encoding the Entire URL

2. Using Deprecated escape()

3. Double Encoding

4. Forgetting to Encode Special Characters in Query Params

encodeURI vs encodeURIComponent

❓ FAQ

Why do spaces become %20?

📚 References

Embed URL Encoder