Complete Guide to URL Encoding (Percent-Encoding)

// Constructing robust URLs using modern WHATWG URL API
const baseUrl = "https://api.curious-techie.com/v1/search";
const url = new URL(baseUrl);

// Set query params safely (handles percent encoding automatically!)
url.searchParams.set("q", "cryptographic hashing & signatures");
url.searchParams.set("redirect", "https://app.curious-techie.com/dashboard?view=full");
url.searchParams.set("symbol", "€");

console.log(url.toString());
// Output: https://api.curious-techie.com/v1/search?q=cryptographic+hashing+%26+signatures&redirect=https%3A%2F%2Fapp.curious-techie.com%2Fdashboard%3Fview%3Dfull&symbol=%E2%82%AC

// Reading and decoding params
const params = new URLSearchParams(url.search);
console.log(params.get("q")); // "cryptographic hashing & signatures" (auto decoded)

const rawParam = "user/profile?role=admin&id=10";

// encodeURI leaves protocol and path delimiters intact:
console.log(encodeURI(rawParam));
// "user/profile?role=admin&id=10" (BROKEN if passed as a query value!)

// encodeURIComponent encodes ALL reserved syntax delimiters:
console.log(encodeURIComponent(rawParam));
// "user%2Fprofile%3Frole%3Dadmin%26id%3D10" (CORRECT for query values)

// Correct usage pattern:
const targetPage = "https://curious-techie.com/auth";
const callback = "https://curious-techie.com/welcome?lang=en";
const fullUrl = `${targetPage}?next=${encodeURIComponent(callback)}`;