根据JS值，使用JS删除部分查询字符串，而无需重新加载页面

Question

如何仅根据参数从URL中删除某些参数？ 例如，如果我要以编程方式删除包含值“ all”的所有参数集，即Ajax事件完成时。

www.foobar.com/page?year=all&language=all&gender=female到：www.foobar.com/page?gender=female

使用JS或jQuery。

Answer 1

var queryParameters = {}, queryString = location.search.substring(1),
    re = /([^&=]+)=([^&]*)/g, m;

while (m = re.exec(queryString)) {
    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}

// Add new parameters or update existing ones
queryParameters['newParameter'] = 'new parameter';
queryParameters['existingParameter'] = 'new value';
location.search = $.param(queryParameters);

Answer 2

 // Handy function to parse the URL and get a map of the query parameters function parseQueryParameters(url) { var qp = {}; if (!url) { return qp; } var queryString = url.split('?')[1]; if (!queryString) { return qp; } return queryString.split('&') .reduce(function(m, d) { var splits = d.split('='); var key = splits[0]; var value = splits[1]; if (key && value) { m[key] = value; } return m; }, qp); } //Function to build a url given a map of query parameters function buildUrl(url, queryParams) { if (!url) { return null; } if (!queryParams) { return url; } return Object.keys(queryParams) .reduce(function(m, key, i) { m += ((i === 0 ? "?" : "&") + key + "=" + queryParams[key]); return m; }, url) } function cleanUrl(url) { //If no URL was provided, do nothing if (!url) return; //Parse and get all query parameters as a map var qp = parseQueryParameters(url); //Create a new map to hold the filtered query parameters var newQp = {}; //For each query paremeter check the value and add only the required ones to the new map //PS: You can also use map/reduce/filter to do this //Using a simple for loop here for clarity var keys = Object.keys(qp); for (var i = 0; i < keys.length; i++) { var currentKey = keys[i]; //Add only if parameter value is not 'all' if (qp[currentKey] !== 'all') { newQp[currentKey] = qp[currentKey]; } } //Build new URL from filtered query parameters return buildUrl(url.split('?')[0], newQp); } //Call cleanUrl with URL cleanUrl("http://example.com?a=all&b=all&c=none"); //Returns "http://example.com?c=none" 

Answer 3

您可以使用URL()构造函数， URLSearchParams()来获得URL的查询字符串作为一个Array对应查询字符串参数的属性和值的阵列， Array.prototype.filter()和RegExp.prototype.test()删除查询数组中的字符串参数，然后再次使用URLSearchParams()来重建过滤后的查询字符串参数

 let src = "https://www.foobar.com/page?year=all&language=all&gender=female"; let url = new URL(src); let re = /all/; let props = [...new URLSearchParams(url.search)] .filter(([key, prop]) => !re.test(prop)); url = url.origin + url.pathname; let params = new URLSearchParams(); props.forEach(([key, prop]) => params.set(key, prop)); url += "?" + params.toString(); console.log(url);