不带 URIEncoding 的 URLSearchParams.set()

Question

URLSearchParams.set(key, value) URI 对给定的值进行编码，产生丑陋的非指定 URL。

以下测试基于此 url 友好字符列表

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}`)

有没有办法使用 URLSearchParams fromURL.searchParams将搜索参数更新为给定的值而不是其编码？

Answer 1

如果希望所有的 searchParams 都未编码，则可以将其设置url.search为其自身的未编码版本：

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}`)

如果只希望指定的密钥不被编码，则需要一些额外的操作

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