[javascript] Is there any method to get the URL without query string?

I have a URL like http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235.

I want to get the URL without the query string: http://localhost/dms/mduserSecurity/UIL/index.php.

Is there any method for this in JavaScript? Currently I am using document.location.href, but it returns the complete URL.

This question is related to javascript url

The answer is


Here are two methods:

<script type="text/javascript">
    var s="http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu
                                =true&pcode=1235";

    var st=s.substring(0, s.indexOf("?"));

    alert(st);

    alert(s.replace(/\?.*/,''));
</script>

Try:

document.location.protocol + '//' +
document.location.host +
document.location.pathname;

(NB: .host rather than .hostname so that the port gets included too, if necessary)


To get every part of the URL except for the query:

var url = (location.origin).concat(location.pathname).concat(location.hash);

Note that this includes the hash as well, if there is one (I'm aware there's no hash in your example URL, but I included that aspect for completeness). To eliminate the hash, simply exclude .concat(location.hash).

It's better practice to use concat to join Javascript strings together (rather than +): in some situations it avoids problems such as type confusion.


window.location.href.split("#")[0].split("?")[0]


var url = window.location.origin + window.location.pathname;

just cut the string using split (the easy way):

var myString = "http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235"
var mySplitResult = myString.split("?");
alert(mySplitResult[0]);

location.toString().replace(location.search, "")

How about this: location.href.slice(0, - ((location.search + location.hash).length))


Here's an approach using the URL() interface:

new URL(location.pathname, location.href).href

Just add these two lines to $(document).ready in JS as follow:

$(document).ready(function () {
 $("div.sidebar nav a").removeClass("active");
        $('nav a[href$="'+ window.location.pathname.split("?")[0] +'"]').addClass('active');
});

it is better to use the dollar sign ($) (End with)

$('nav a[href$

instead of (^) (Start with)

$('nav a[href^

because, if you use the (^) sign and you have nested URLs in the navigation menu, (e.g "/account" and "/account/roles")

It will active both of them.


If you use dot net core 3.1, it is supporting case ignore route, so the previous way is not helpful if the rout is in small letters and the user writes the rout in capital letters.

So, the following code is very helpful:

$(document).ready(function () {
    $("div.sidebar nav a").removeClass("active");
    var urlPath = window.location.pathname.split("?")[0];
    var nav = $('div.sidebar nav a').filter(function () {
        return $(this).attr('href').toLowerCase().indexOf(urlPath.toLocaleLowerCase()) > -1;
    });
    $(nav).each(function () {
        if ($(this).attr("href").toLowerCase() == urlPath.toLocaleLowerCase())
            $(this).addClass('active');
    });
});

If you also want to remove hash, try this one: window.location.href.split(/[?#]/)[0]


Read about Window.location and the Location interface:

var url = [location.protocol, '//', location.host, location.pathname].join('');

Use properties of window.location

var loc = window.location;
var withoutQuery = loc.hostname + loc.pathname;
var includingProtocol = loc.protocol + "//" + loc.hostname + loc.pathname;

You can see more properties at https://developer.mozilla.org/en/DOM/window.location