JavaScript:搜索 URL 参数并删除它，包括值

Question

我这里有这个 URL:

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= 的正则表达式，然后是非-& 字符，后跟 &(如果 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');