JavaScript：搜索 URL 参数并将其删除，包括值

Question

我在这里有这个网址：

http://localhost.com/?size=L,M,S&color=Red,Blue,Green

URL 也可以采用以下格式：

http://localhost.com/?color=Red,Blue,Green&size=L,M,S

我现在正在尝试color完全删除参数，包括所有参数以及&第一个示例或?最后一个示例中的 。如果是后一种情况下，我需要改变&从size到?。

我已经尝试过这种方式，但它只是删除了没有任何参数和所有其他东西的参数词：

window.history.pushState(null, null, window.location.search.replace('color', ''));

我怎样才能做到我上面描述的？

Answer 1

一种选择是使用URLSearchParams，删除color，然后使用toString()以下命令再次构造搜索参数：

function fixParams(search) {
  const params = new URLSearchParams(search);
  params.delete('color');
  const searchString = decodeURIComponent(params.toString());
  const newUrl = window.location.origin + window.location.pathname + (searchString ? '?' : '' ) + searchString;
  console.log(newUrl);
  // window.history.pushState(null, null, newUrl);
}
fixParams('?color=Red,Blue,Green&size=L,M,S');
fixParams('?size=L,M,S&color=Red,Blue,Green');
fixParams('?color=Red,Blue,Green');

URLSearchParams但是，将需要 polyfill 才能在非常旧的浏览器上工作 - 因此，另一种选择是使用匹配的正则表达式color=，后跟非&字符，后跟 a &（如果color不是最后一个参数），或匹配[?&]color=，然后是非&字符，后跟字符串的结尾（如果color是最后一个参数） - 然后用空字符串替换匹配项：

function fixParams(name, search) {
  const re = new RegExp(name + '=[^&]*&|[?&]' + name + '=[^&]*$', 'g');
  // const newUrl = window.location.search.replace(re, '');
  const newUrl = search.replace(re, '');
  // window.history.pushState(null, null, newUrl);
  console.log(newUrl);
}

fixParams('color', '?color=Red,Blue,Green&size=L,M,S');
fixParams('color', '?size=L,M,S&color=Red,Blue,Green');
fixParams('color', '?color=Red,Blue,Green');

fixParams('foobar.com/?color=Red,Blue,Green&size=L,M,S');
fixParams('foobar.com/?size=L,M,S&color=Red,Blue,Green');
fixParams('foobar.com/?color=Red,Blue,Green');