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?
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}`;
}