How do you safely encode a URL using JavaScript such that it can be put into a GET string?

To safely encode URLs in JavaScript for use in GET strings, you must ensure that special characters in query parameters are properly escaped to avoid breaking the URL structure. Below is a detailed guide with multiple examples and explanations.

Core Concepts

1. encodeURIComponent():

• Encodes individual query parameters (keys and values).
• Replaces special characters (e.g., !, ', (, ), ~, &, =, +, ) with their UTF-8 escape sequences (e.g., %20 for spaces).
• Use Case: Always use this for query parameters (values after ? in a URL).

1. encodeURI():

• Encodes an entire URL but preserves characters necessary for a valid URL (e.g., :/?#[]@!$&'()*+,;=).
• Use Case: Encoding a full URL (not individual parameters).

1. URLSearchParams (Modern Alternative):

• Automatically encodes key-value pairs in application/x-www-form-urlencoded format (spaces become + instead of %20).
• Use Case: Simplifies building query strings but may require adjustments for strict URL encoding.

Example 1: Basic Query String Encoding

Scenario: Encode parameters name and city with spaces and special characters.

const params = {
  name: "John Doe & Sons",
  city: "San Francisco, CA"
};

const queryString = Object.entries(params)
  .map(([key, value]) => 
    `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
  )
  .join('&');

console.log(queryString);
// Output: "name=John%20Doe%20%26%20Sons&city=San%20Francisco%2C%20CA"

Resulting URL:

https://example.com/api?name=John%20Doe%20%26%20Sons&city=San%20Francisco%2C%20CA

Example 2: Handling Reserved Characters

Problem: If you use encodeURI instead of encodeURIComponent, reserved characters like & or = will break the URL:

// ❌ Incorrect (using encodeURI)
const badParam = encodeURI("q=JavaScript&Actionscript");
console.log(badParam); // "q=JavaScript&Actionscript" (breaks the URL)

// ✅ Correct (using encodeURIComponent)
const goodParam = encodeURIComponent("q=JavaScript&Actionscript");
console.log(goodParam); // "q%3DJavaScript%26Actionscript"

Example 3: Unicode Characters (Emojis)

const params = {
  query: "Café ☕ & Pizza 🍕"
};

const queryString = Object.entries(params)
  .map(([key, value]) => 
    `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
  )
  .join('&');

console.log(queryString);
// Output: "query=Caf%C3%A9%20%E2%98%95%20%26%20Pizza%20%F0%9F%8D%95"

Resulting URL:

https://example.com/search?query=Caf%C3%A9%20%E2%98%95%20%26%20Pizza%20%F0%9F%8D%95

Example 4: Using URLSearchParams

Note: Spaces become + instead of %20, which works in URLs but may cause issues in some APIs.

const params = new URLSearchParams({
  user: "Alice Bob",
  role: "admin/user"
});

console.log(params.toString());
// Output: "user=Alice+Bob&role=admin%2Fuser"

To convert + to %20 for strict URL compliance:

const strictQuery = params.toString().replace(/\+/g, '%20');
console.log(strictQuery); // "user=Alice%20Bob&role=admin%2Fuser"

Example 5: Full URL Construction

Combine encodeURI and encodeURIComponent for different parts:

const baseUrl = "https://example.com/data";
const queryParams = {
  filter: "price <= 100",
  sort: "name:asc"
};

// Encode individual parameters
const encodedParams = Object.entries(queryParams)
  .map(([key, value]) => 
    `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
  )
  .join('&');

// Encode the entire URL (preserves :, /, etc.)
const fullUrl = encodeURI(`${baseUrl}?${encodedParams}`);

console.log(fullUrl);
// Output: "https://example.com/data?filter=price%20%3C%3D%20100&sort=name%3Aasc"

Special Cases & Best Practices

1. Spaces:

• encodeURIComponent converts spaces to %20 (URL-safe).
• URLSearchParams uses + (works in URLs but may need adjustment).

1. Nested Parameters:
   Encode JSON or nested objects as a single parameter:

   const data = { filters: { category: "books", price: 50 } };
   const encodedData = encodeURIComponent(JSON.stringify(data));
   // Result: "%7B%22filters%22%3A%7B%22category%22%3A%22books%22%2C%22price%22%3A50%7D%7D"

3. Security:
   Always encode user input to prevent URL injection:

   const userInput = "malicious?query=1&attack=true";
   const safeInput = encodeURIComponent(userInput);
   // Result: "malicious%3Fquery%3D1%26attack%3Dtrue"

Summary

Method	Use Case	Encodes Spaces As
encodeURIComponent	Individual query parameters	%20
encodeURI	Entire URLs (preserves structure)	%20
URLSearchParams	Simple key-value pairs (uses +)	+

By following these practices, you ensure URLs are safe, standards-compliant, and free from injection vulnerabilities.