JavaScript Get The Current URL

Using JavaScript to get the current URL can be useful in a lot of ways. In this post we are going to go over the many different ways you can get either the whole or just parts of the current URL.

TL;DR: You can get the full current URL by accessing window.location.href.

function getCurrentUrl(){
    return window.location.href;
}

In the rest of the post we are going to go over the many ways we can work with the URL to get various information form it.

Different ways we can work with the current URL using JS

In order to get various parts of the url we are going to use the location property on the window object. This will give us access to all the properties that we might want to work with. The Window object is a global element that you will have access to. If you type window.location into the console of your browser then you will see something like this. I encourage you to explore the object yourself using the console of the browser you are on.

Output of typing window.location into the console.

We already looked at how we can get the full ULR so we will not go over it again.

Below I have created a lot of interactive functions that you can play with and use to retrieve the information you want.

1. Get the current URL without parameters

Another thing you might want to do is to get the domain without the parameters. This can be a bit tricky because the parameters might not be all the is included on the base URL. You can have some child resource such as www.domain.com/resource/parametersHere. For this example we want to only strip of the parameters, and not the path leading up to where the parameters start.

We know that parameters start with a question mark, so the strategy here will be to first get the whole URL, then split the string on question marks, and return the first index of the resulting array. This will give us the full URL but without any parameters.

function getUrlWithoutParameters(){
    var urlAndParams = window.location.href.split('?');
    return urlAndParams[0];
}

If you copy the code above into the console to test it out you should see the following.

Example of getting the url without any parameters

2. Get the current URL without the path

As you can see in the example above, even if we take out the parameters that does not mean that we have just our base URL. In this example lets look at how we can strip off everything that comes after the base URL so that we can get it without any paths at all.

If you have played around with the location object that is located on the window object, then you might have noticed that there is a property called “origin”. This property gives us exactly what we are looking for.

function getUrlWithoutPath(){
    return window.location.origin;
}

This function will give us just the domain but to path. It still includes whatever is before the domain. If you want to leave that out as well then you can return the hostname property instead.

If you paste the code above into the console then you will see the following.

Get the URL without the path

3. Get the current URL query string

This is oposite of how we got the URL without the parameters.

Luckliy there is a “search” property that we can use to get the query string. If we want to get the query string out of the URL manually then all we have to do is split the string on the question mark, and return the second index. Here we will make sure to check that there is a second index in case the URL doesn’t have a query string in it.

// Manual solution
function getQueryStringFromCurrentUrl(){
    var urlAndQueryString = window.location.href.split('?');
    var queryString = window.location.href.substring(window.location.href.indexOf('?') + 1);
    return (queryString == window.location.href) ? null : queryString;
}

// Using search property
function getQueryStringFromCurrentUrl2(){
    return window.location.search;
}

This is a pretty straight forward method, but you might have to think about the logic of how you use it because if there is no query string then it will not return anything and it will be undefined. So make sure you check for that when before you try to use the result.

If you take the code above and copy it into the console you will see the following.

4. Get the current URL prams

One of the more trickier things we will do in this post is to get the parameters out of a URL. It is not that difficult, but we have to do a little bit of string manipulation, and we are also going to store our values on an object. We are going to store the values in key value pars on an object so that we have easy access to it.

The strategy here will first be to get the query string out of the URL like we did in the example above. We are then going to take advantage of the fact that each key value pair in the query string follow this pattern: “param=value”, and if there are more parameters then they are separated by a “&”. So if we split the string on “&” then we will have all the key value pars. At that point we we just have to loop over all of them and store it on our object. We will also make sure to decode them using decodeURI() so that we get the actual value and not something like %20 for spaces.

function getCurrentUrlParams(){
    var result = {};
    var queryString = "";

    var queryString= window.location.href.substring(window.location.href.indexOf('?') + 1);
    // You can also use the "search" property but then you have to get rid of the ? at the beginning

    if(queryString == window.location.href){
        return null; // Return whatever you want if there is no query string
    }

    var keyValuePairs = queryString.split('&');
    for(var i = 0; i < keyValuePairs.length; i++){
        var keyValuePair = keyValuePairs[i].split('=');

        var key =  decodeURI(keyValuePair[0]);
        var value = decodeURI(keyValuePair[1]);

        result[key] = value;
    }
 
    return result;
}

The solution above should be pretty easy to understand, at least easier than anything that would solve this using regEx. You might also want to check if the object you get back is empty.

If you copy the above into the console you should see the following.

Get the parameters from the current URL.

5. Get current URL without domain

Now lets try to get just the path of the URL. That means the URL without the domain at the beginning. There is pathname parameter we can use for just this.

function getCurrentUrlPath(){
    return window.location.pathname;
}

If you copy the above into the console and run it you will see the following.

6. Get the protocol used on the current URL

Now we want to see how we can get the protocol we are using to view the current page. You could use this information to display a warning if you are not using https. There is protocol property we can use to achieve this.

function getProtocolUsed(){
    return window.location.protocol;
}

When using the function above you should see the following output.

Get the protocol used to retrieve page

That is it for our guide on how to work with window.location.

If you want to learn more about JavaScript you can check out our guide on how to check if an object is empty or how to get the current time.

Last Updated: by Ole Larsen