我这里有这个 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', ''));
我怎样才能做到我上面描述的?
最佳答案
一种选择是使用 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 参数并删除它,包括值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53678882/