从 URL 中删除查询字符串

为了提供一个全面的答案，我正在对各种答案中提出的三种方法进行基准测试。

var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3';
var i;


// Testing the substring method
i = 0;
console.time('10k substring');
while (i < 10000) {
testURL.substring(0, testURL.indexOf('?'));
i++;
}
console.timeEnd('10k substring');


// Testing the split method
i = 0;
console.time('10k split');
while (i < 10000) {
testURL.split('?')[0];
i++;
}
console.timeEnd('10k split');


// Testing the RegEx method
i = 0;
var re = new RegExp("[^?]+");
console.time('10k regex');
while (i < 10000) {
testURL.match(re)[0];
i++;
}
console.timeEnd('10k regex');

在Mac OS X 10.6.2上使用Firefox 3.5.8的结果:

10k substring:  16ms
10k split:      25ms
10k regex:      44ms

Chrome 5.0.307.11在Mac OS X 10.6.2上的结果:

10k substring:  14ms
10k split:      20ms
10k regex:      15ms

请注意，如果URL不包含查询字符串，子字符串方法在功能上是较差的，因为它返回一个空白字符串。其他两个方法将如预期的那样返回完整的URL。然而，有趣的是，子字符串方法是最快的，特别是在Firefox中。

实际上，split()方法由鲁布斯托提出是一个比我之前建议的更好的解决方案，因为它即使在没有查询字符串的情况下也可以工作:

var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3';
testURL.split('?')[0];    // Returns: "/Products/List"


var testURL2 = '/Products/List';
testURL2.split('?')[0];    // Returns: "/Products/List"

最初的回答:

var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3';
testURL.substring(0, testURL.indexOf('?'));    // Returns: "/Products/List"

如果你需要对URL执行复杂的操作，你可以看看jQuery url解析插件。

一个简单的方法是:

function getPathFromUrl(url) {
return url.split("?")[0];
}

对于那些也希望移除散列(不是原始问题的一部分)当不存在查询字符串时的人，这需要更多一点:

function stripQueryStringAndHashFromPath(url) {
return url.split("?")[0].split("#")[0];
}

编辑

@caub(最初是@crl)建议使用一个更简单的组合，同时适用于查询字符串和哈希(尽管它使用RegExp，以防有人对此有问题):

function getPathFromUrl(url) {
return url.split(/[?#]/)[0];
}

如果你喜欢RegEx....

var newURL = testURL.match(new RegExp("[^?]+"))

一个简单的方法是你可以这样做

public static String stripQueryStringAndHashFromPath(String uri) {
return uri.replaceAll(("(\\?.*|\\#.*)"), "");
}

var path = "path/to/myfile.png?foo=bar#hash";


console.log(
path.replace(/(\?.*)|(#.*)/g, "")
);

如果使用backbone.js(包含url anchor作为路由)，url query string可能会出现:

1. < p > url anchor之前:

   var url = 'http://example.com?a=1&b=3#routepath/subpath';
   

2. after url anchor:

   var url = 'http://example.com#routepath/subpath?a=1&b=3';
   

Solution:

window.location.href.replace(window.location.search, '');
// run as: 'http://example.com#routepath/subpath?a=1&b=3'.replace('?a=1&b=3', '');

这可能是一个老问题，但我已经尝试过这种方法来删除查询参数。似乎工作顺利为我，因为我需要重新加载以及结合删除查询参数。

window.location.href = window.location.origin + window.location.pathname;

此外，因为我使用简单的字符串加法操作，我猜性能会很好。但仍然值得与这个答案中的片段进行比较

使用标准URL的方法:

/**
* @param {string} path - A path starting with "/"
* @return {string}
*/
function getPathname(path) {
return new URL(`http://_${path}`).pathname
}


getPathname('/foo/bar?cat=5') // /foo/bar

我能理解以前的事情有多痛苦，在现代，你可以非常容易地得到这个，就像下面这样

let url = new URL('https://example.com?foo=1&bar=2&foo=3');
let params = new URLSearchParams(url.search);


// Delete the foo parameter.
params.delete('foo'); //Query string is now: 'bar=2'


// now join the query param and host
let newUrl =  url.origin + '/' + params.toString();

回答人们使用React和Next.js的问题

你好!如果你正在使用React / Next.js，这里有一个我构建的小函数，你可以使用它来删除任何查询参数，同时保留其他参数。

注意，这个函数将删除任何存在的哈希值。

/** Removes a query param.
* @param {string} param The id / query param you want removed.
* @param {obj} router The router object from useRouter via 'next/router' (Next.js)
*//
export const removeQueryParam = (param, router) => {
// Bulletproofing
if (!Boolean(param)) return router.asPath


let result = router.asPath.split("?")[0]
const params = Object.keys(router.query).filter((key) => key != param)
if (params.length) {
result += "?"
params.forEach((key, index) => {
result += `${index != 0 ? "&" : ""}${key}=${router.query[key]}`
})
}
return result
}

希望这能帮助到一些人!