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更改为?。

我已经尝试过这种方法，但是它只是删除了prameter单词，没有任何参数和所有其他内容：

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');

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

1 个答案: