Remove querystring from URL

Question

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'

Edit after 13 years

At some point in the last decade Javascript got some Url handling.

Answer 1

An easy way to get this is:

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

For those who also wish to remove the hash (not part of the original question) when no querystring exists, that requires a little bit more:

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

EDIT

@caub (originally @crl) suggested a simpler combo that works for both query string and hash (though it uses RegExp, in case anyone has a problem with that):

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

• Daniel Vassallo: +1... Actually split() is better than substring() in this case.
• bobince: Marginal optimisation if it matters (probably not): split('?', 1)[0].
• Robusto: @ChristianVielma: This ? is a string literal, not a regular expression.
• Christian Vielma: @Robusto I'm sorry, my bad... I was checking it in Java (which interprets it as a regex) :(
• caub: Hey Robusto, and why not .split(/[?#]/)[0]?

Answer 2

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"

• deceze: O_O Very comprehensive indeed, but... why? The most flexible and appropriate method obviously wins, speed is of absolutely no concern here.
• Daniel Vassallo: @deceze: Just for curiosity... And because there was an argument about the performance of the regex method in the comments of the Angus' answer.
• Robusto: Very interesting, Daniel. And if I ever have to do 10K URL parses on a page I'm going to seek another line of work. :)
• TheGerm: I'm actually a bit blown away that one can do 10k regex matches in 44ms. In the future, I think I will be inclined to use them more.

Answer 3

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

• Daniel: Best solution IMO. Are there are downsides or cases where this won't work?
• Robusto: The reason is that the OP specifically states that they can't use window.location and have to operate on a bare string exclusively.

Answer 4

var u = new URL('https://server.de/test?q#h')
u.hash = ''
u.search = ''
console.log(u.toString())

• polkovnikov.ph: This is the only valid answer in this thread.
• Rodrigo Amaral: This is better and even works in nodejs, but the performance is just a little worse if you have to process many thousands of URLs per second.

Answer 5

I can understand how painful things were before, In modern days you can get this super easily like below

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

• Unmitigated: let params = url.searchParams suffices.
• thomaux: This does not take instances into consideration where you have a path

Answer 6

var path = "path/to/myfile.png?foo=bar#hash";
console.log(
 path.replace(/(\?.*)|(#.*)/g, "")
);

Answer 7

A simple way is you can do as follows

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

Answer 8

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

• The Fool: @Brad what does the protocol matter when all he does is returning the pathname afterwards?
• Tom: @The Fool - the new URL() will fail with 'Invalid URL` error message otherwise

Answer 9

If you're into RegEx....

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

• Aristos: the regexp is slow one - go with the easy fast way.
• Daniel Vassallo: @Angus: Your loop is giving you "A script may be busy..." because you forgot to increment a++;. Fixing the tests, in my Firefox 3.6 on an iMac 2.93Ghz Core 2 Duo, I get 8ms for the RegEx, and 3ms for the split method... Nevertheless +1 for the answer, because it is still another option.
• plodder: thanks - I fixed it a few mins ago! - but the point is when you are talking 0.000005 seconds even for the reg exp operation, performance is not an issue for any solution :-)
• bobince: match() returns an object. You probably don't want that. Call toString() on it (or +'').
• plodder: Bob - good catch. Actually it returns an array of matches - an Array of strings in this case. So testURL.match(new RegExp("[^?]+"))[0] does it

Answer 10

If using backbone.js (which contains url anchor as route), url query string may appear:

1. before 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', '');

Answer 11

You can use URL with a dummy base (e.g. http://localhost ) as second parameter:

new URL('/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3&SortOrder=dsc',
 'http://localhost')
.pathname
//Outputs: /Products/List

It works also for full urls:

new URL('http://someSite.com/Products/List?SortDirection=dsc&Sort=price&Page=3&Page2=3&SortOrder=dsc',
 'http://localhost')
.pathname
//Outputs: /Products/List

Answer 12

Using URL

Removing specific param:

const url = new URL('https://example.com?foo=1&bar=2');
url.searchParams.delete("foo");
console.log(url.href);

Removing all params:

const url = new URL('https://example.com?foo=1&bar=2');
url.search = "";
console.log(url.href);