encodeURI vs encodeURIComponent: Ultimate Guide with 15+ Examples

Example 1: Building a search URL with user input

const searchQuery = "javascript tutorial & examples";
const encodedQuery = encodeURIComponent(searchQuery);
const url = `https://google.com/search?q=${encodedQuery}`;
// Result: https://google.com/search?q=javascript%20tutorial%20%26%20examples

Example 2: API call with nested parameters

const params = { filter: "category=books&sort=desc", page: 1 };
const queryString = Object.keys(params)
  .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
  .join('&');
// Result: filter=category%3Dbooks%26sort%3Ddesc&page=1

Example 3: Email in URL (mailto:)

const email = "user+filter@example.com";
const subject = "Meeting tomorrow & agenda";
const mailtoUrl = `mailto:${encodeURIComponent(email)}?subject=${encodeURIComponent(subject)}`;
// Result: mailto:user%2Bfilter%40example.com?subject=Meeting%20tomorrow%20%26%20agenda

Example 4: Path segment with special chars

const username = "john.doe+admin";
const encodedUsername = encodeURIComponent(username);
const profileUrl = `https://api.com/users/${encodedUsername}/profile`;
// Result: https://api.com/users/john.doe%2Badmin/profile

Example 5: Fragment identifier with spaces

const section = "chapter 1: introduction";
const fragment = encodeURIComponent(section);
// Result: #chapter%201%3A%20introduction

Example 6: Handling redirect URLs

const returnUrl = "https://example.com/dashboard?tab=profile&lang=en";
const encodedReturnUrl = encodeURIComponent(returnUrl);
const loginUrl = `https://auth.com/login?redirect=${encodedReturnUrl}`;
// Result: https://auth.com/login?redirect=https%3A%2F%2Fexample.com%2Fdashboard%3Ftab%3Dprofile%26lang%3Den

Example 7: Form data with spaces and special chars

const formData = { name: "John & Jane Doe", comment: "Check this out: https://example.com", rating: "5/5" };
const encoded = Object.entries(formData)
  .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
  .join('&');
// Result: name=John%20%26%20Jane%20Doe&comment=Check%20this%20out%3A%20https%3A%2F%2Fexample.com&rating=5%2F5

Pitfall 1: Using encodeURI() for query parameters

❌ encodeURI("hello&world") → "hello&world" (unchanged, breaks URL!)
✅ encodeURIComponent("hello&world") → "hello%26world"

Pitfall 2: Double encoding

❌ encodeURIComponent(encodeURIComponent("hello")) → "hello%2520"
✅ encodeURIComponent("hello") → "hello%20"
✅ Only encode once at the boundary

Pitfall 3: Forgetting to decode when displaying

❌ displayText = encodedValue  // Shows "hello%20world" to user
✅ displayText = decodeURIComponent(encodedValue)  // Shows "hello world"

Pitfall 4: Encoding already valid URLs completely

❌ const url = encodeURIComponent("https://example.com") → "https%3A%2F%2Fexample.com"
✅ const url = "https://example.com/" + encodeURIComponent(path)

Pitfall 5: Mixing + and %20 for spaces

❌ "hello+world" + "&name=" + encodeURIComponent("Jane Doe") → inconsistent
✅ Always use %20 via encodeURIComponent() for consistency

Pitfall 6: Not handling null/undefined values

❌ encodeURIComponent(undefined) → "undefined" (string!)
✅ if (value === null || value === undefined) value = ""

Pitfall 7: Assuming all special chars are encoded the same across languages

// PHP: urlencode() uses + for spaces, rawurlencode() uses %20
// JS: encodeURIComponent() uses %20
// Be consistent across backend/frontend!