How to Get the Query String in JavaScript

How to Get the Query String in JavaScript

In this quick article, we’ll discuss a couple of different ways that you could use to get the query string in JavaScript.

When you’re working with JavaScript, sometimes you need to access query string parameters in your script. There’s no straightforward way to achieve this, since there’s no built-in JavaScript function or method which allows you to achieve it. Of course, you can find a lot of third-party utility scripts that fulfill your requirements, but it’s best if you can implement it with vanilla JavaScript.

In this post, we’ll discuss how you can build a custom function to get query string parameters in vanilla JavaScript. Later on, we’ll also explore the URLSearchParams interface to understand how it works and how it can help with query string parameters..

How to Get the Query String in Vanilla JavaScript

In this section, we’ll see how you can get query string values with vanilla JavaScript.

Let’s go through the following JavaScript example.

function getQueryStringValues(key) {
    var arrParamValues = [];
    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for (var i = 0; i < url.length; i++) {
        var arrParamInfo = url[i].split('=');

        if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
            arrParamValues.push(decodeURIComponent(urlparam[1]));
        }
    }

    return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);
}

// index.php?keyword=FooBar&hobbies[]=sports&hobbies[]=Reading
console.log(getQueryStringValues('keyword')); // "FooBar"
console.log(getQueryStringValues('hobbies')); // Array [ "sports", "Reading" ]
console.log(getQueryStringValues('keyNotExits')); // null

We’ve made the getQueryStringValues function, which you can use to get the value of the query string parameter available in the URL.

Let’s go through the function to see how it works.

The following snippet is one of the most important snippets in the function.

var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

Firstly, we’ve used the indexOf method to find the position of the ? character in the URL. Next, we’ve used the slice method to extract the query string part in the URL. Finally, we’ve used the split method to split the query string by the & character. Thus, the url variable is initialized with an array of query string parameters.

Next, we loop through all the elements of the url array. In the loop, we use the split method to split the array value by the = character. And with that, the arrParamInfo variable is initialized with an array, where the array key is the parameter name and the array value is the parameter value. You can see that in the following snippet.

var arrParamInfo = url[i].split('=');

Next, we compare it with the argument which is passed in the function. If it matches with the incoming argument, we’ll push the parameter value into the arrParamValues array. As you can see, we’ve covered both single and array parameters as well.

if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
    arrParamValues.push(decodeURIComponent(urlparam[1]));
}

Finally, if the arrParamValues variable contains values, we’ll return it, otherwise null is returned.

return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);

You can go ahead and test the getQueryStringValues function with different values.

As shown in the above example, we’ve called it with different values and logged the output with the console.log function. It’s important to note that if the parameter which you’ve passed in the getQueryStringValues function exists as an array in the query string, you would get an array in response, and it would return all the values of that parameter.

The URLSearchParams Way

It’s one of the easiest ways which you can use to get query string values in JavaScript. The URLSearchParams interface provides utility methods to work with the query string of a URL. You can check browser support with Can I use.

Let’s quickly see how it works.

// index.php?keyword=Search Text&click=Submit
var urlParams = new URLSearchParams(window.location.search);

Once you initialize the URLSearchParams object with the query string, you’re ready to use the utility methods provided by the URLSearchParams object.

Let’s go through a couple of useful methods in the context of this article.

The get Method

As the name suggests, the get method is used to get the value of the query string parameter.

Let’s try to understand it with the following example.

// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.get('keyword')); // “Search Text”

In the above example, we’ve fetched the value of the keyword query string parameter, and it would output Search Text.

In this way, you can use the get method to get the value of any query string parameter.

The has Method

The has method is used to check the existence of a parameter in the query string.

// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.has('order')); // “false”
console.log(objUrlParams.has('click')); // “true”

In the above example, we’ve used the has method to check the existence of the different parameters.

The getAll Method

The getAll method is used to get all the values of a parameter if it exists multiple times.

Let’s check it with the following example.

// index.php?keyword=Search Text&click=Submit&filter=value1&filter=value2
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.getAll('filter')); // [“value1”,”valu2”]

As you can see, when we use the getAll method, it returns all the values associated with the parameter.

Conclusion

Today, we discussed the different ways that you could use to get the query string in JavaScript. Along with the vanilla JavaScript, we also discussed how you can use the URLSearchParams interface to get query string variables.