javascripturlurlsearchparams

URLSearchParams.set() without URIEncoding

URLSearchParams.set(key, value) URIEncodes the values its given, producing ugly non-specified urls.

The following test is based off this list of url friendly characters

const url = new URL("http://www.example.com/path");
const test = "abc123+-_$#%?@,"
url.searchParams.set("foo", test);

console.log(`What foo should be: ${test}`);
console.log(`What foo is: ${url.search}`)

Is there a way to use URLSearchParams from URL.searchParams to update a search param to the value given and not an encoding of it?

Solution

  • If one wants all their searchParams to be unencoded, they can just set url.search to an unencoded version of itself:

    const url = new URL("http://www.example.com/path");
const test = "abc123+-_$#%?@,"
url.searchParams.set("foo", test)
url.search = decodeURIComponent(url.search)

console.log(`What foo should be: ${test}`);
console.log(`What foo is: ${url.search}`)

    If one only wants the specified key to be unencoded, it takes some extra

    const testUrl = new URL("http://www.example.com/path");
testUrl.searchParams.set("bar", "++ ++");

const testVal = "abc123+-_$#%?@,";
setValueUnencoded(testUrl, "foo", testVal);


console.log(`What foo should be: ${testVal}`);
console.log(`What foo is: ${testUrl.search}`)


function setValueUnencoded(url, key, value) {
  url.searchParams.set(key, value);
  const entries = Array.from(url.searchParams.entries());
  url.search = "";
  entries.forEach(item => {
    if (item[0] === key) { return; }
    url.searchParams.set(item[0], item[1]);
  });
  url.search += `${key}=${value}`;
}