What is an easy way to remove the querystring from a Path in Javascript? I have seen a plugin for Jquery that uses window.location.search. I can not do that: The URL in my case is a variable that is set from AJAX.
var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3&SortOrder=dsc'
This question is related to
javascript
jquery
If you need to perform complex operation on URL, you can take a look to the jQuery url parser plugin.
An approach using the standard 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
This may be an old question but I have tried this method to remove query params. Seems to work smoothly for me as I needed a reload as well combined with removing of query params.
window.location.href = window.location.origin + window.location.pathname;
Also since I am using simple string addition operation I am guessing the performance will be good. But Still worth comparing with snippets in this answer
var path = "path/to/myfile.png?foo=bar#hash";
console.log(
path.replace(/(\?.*)|(#.*)/g, "")
);
If using backbone.js (which contains url anchor
as route), url query string
may appear:
before url anchor
:
var url = 'http://example.com?a=1&b=3#routepath/subpath';
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', '');
2nd Update: In attempt to provide a comprehensive answer, I am benchmarking the three methods proposed in the various answers.
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');
Results in Firefox 3.5.8 on Mac OS X 10.6.2:
10k substring: 16ms
10k split: 25ms
10k regex: 44ms
Results in Chrome 5.0.307.11 on Mac OS X 10.6.2:
10k substring: 14ms
10k split: 20ms
10k regex: 15ms
Note that the substring method is inferior in functionality as it returns a blank string if the URL does not contain a querystring. The other two methods would return the full URL, as expected. However it is interesting to note that the substring method is the fastest, especially in Firefox.
1st UPDATE: Actually the split() method suggested by Robusto is a better solution that the one I suggested earlier, since it will work even when there is no querystring:
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"
Original Answer:
var testURL = '/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3';
testURL.substring(0, testURL.indexOf('?')); // Returns: "/Products/List"
If you're into RegEx....
var newURL = testURL.match(new RegExp("[^?]+"))
A simple way is you can do as follows
public static String stripQueryStringAndHashFromPath(String uri) {
return uri.replaceAll(("(\\?.*|\\#.*)"), "");
}
(() => {
'use strict';
const needle = 'SortOrder|Page'; // example
if ( needle === '' || needle === '{{1}}' ) {
return;
}
const needles = needle.split(/\s*\|\s*/);
const querystripper = ev => {
if (ev) { window.removeEventListener(ev.type, querystripper, true);}
try {
const url = new URL(location.href);
const params = new URLSearchParams(url.search.slice(1));
for (const needleremover of needles) {
if (params.has(needleremover)) {
url.searchParams.delete(needleremover);
window.location.href = url;
}
}
} catch (ex) { }
};
if (document.readyState === 'loading') {
window.addEventListener('DOMContentLoaded', querystripper, true);
} else {
querystripper();
}
})();
That's how I did it, also has RegEx support.
Source: Stackoverflow.com