JavaScript To Read URL Properties Like Query String Using Window.Location

Did you ever faced problem fetching the query string parameters value at client side? If yes then we will introduce you to window.location which has all the information that can be understood using URL of your page. So let's get started

In your JavaScript you can use window.location or just location to access loads of properties which browsers provide. For ex, the most basic property is window.location.href which tells us the full URL of the current page. So see what all location properties JavaScript offers, just open your console and run window.location. Take example of google search, lets search for cheezycode and then run window.location in console.

Here as you can see there are multiple properties let's see what are they and where we can use them

Property	Information
hash	Gives the value after '#' in URL, helpful while using angularjs
host	Gives the domain name like 'www.google.co.in'
href	Gives full URL present in the address bar
origin	Gives host with http/https like 'https://www.google.co.in'
pathname	Gives the name of the page excluding querystring and origin
port	Gives the port number if its mentioned in URL
protocol	Gives the value as 'http:' or 'https:'
search	Gives full query string starting from '?' sign

How To Read Query String Parameters In Javascript?

Use this function in your javascript where paramName is the name of the querystring parameter whose value you want. This function will return blank if no querystring is present for the asked parameter otherwise it will return the parameter value.

function getParamValue(paramName) {
    url = window.location.href;
    paramName = paramName.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + paramName + "(=([^&#]*)|&|#|$)", "i"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

//You can call this up like
var parameterValue = getParamValue('paramXYZ');

So that's all about how you can read URL from client side. Do let us know if you face any difficulty cause we are happy to help. Read our other JavaScript related articles here.

Happy Learning!!!