138

How can I check if the query string contains a q= in it using JavaScript or jQuery?

2
  • 3
    This might be of help too: stackoverflow.com/a/12151322 - contains information about URLSearchParams, eg: var url = new URLSearchParams(location.search); url.has("my_great_query"); returns true if that query string is in your url. You can then get its value with url.get("my_great_query");. Commented Jul 5, 2019 at 13:53
  • This is by far the cleanest way to parse variables as URL decoding is also automatically handled! Commented Jun 14, 2023 at 2:29

12 Answers 12

132

You could also use a regular expression:

/[?&]q=/.test(location.search)
Sign up to request clarification or add additional context in comments.

3 Comments

actually it would lok more like: if (!new RegExp("[?&]hfPageToken=").test(s.data)) // if hfPageToken data is not already present in the request { s.data = s.data ? [s.data, tokenParam].join("&") : tokenParam; }
Just to clarify, this works great if(/[?&]q=/.test(location.search)) { alert("match"); } (I was a bit confused due to @DragosDurlut comment. :)
Yoda would say regarding regular expressions: "Shorter code they are.. easier to read they are not".
129
var field = 'q';
var url = window.location.href;
if(url.indexOf('?' + field + '=') != -1)
    return true;
else if(url.indexOf('&' + field + '=') != -1)
    return true;
return false

7 Comments

Multiple return paths is a personal choice, I use them because I think they lead to cleaner code, since they help me avoid nested if statements and show exactly what is going on at a certain point in code. As for the stict cases, both the left hand and right hand sides will always be numbers, so what difference would switching to strict equality operators make?
Cleaner code? ... Why not just return the indexOf test, instead of placing it in a totally useless preliminary IF statement.
I agree with J-P. You may have written the correct solution, but your code is really sloppy. Where are you curly braces? You should read "The Good Parts" where code written a style without curly braces has been proven to fail under certain conditions and produces confusion during maintenance.
url.indexOf(field + '=') != -1 was enough I think. It doesn't matter if it is in the beginning or not
@yyy No it wasn't. If you had a query string like ?kodiaq=1, then calling url.indexOf('q=') without prefixing it with & or ? would lead you to believe that the q parameter is present.
|
75

Using URL:

url = new URL(window.location.href);

if (url.searchParams.has('test')) {

}

EDIT: if you're sad about compatibility, I'd highly suggest https://github.com/medialize/URI.js/.

EDIT: see comment and Plabon's answer for why using get is problematic to check existence. Much better to use searchParams.has().

2 Comments

Nice, but no IE support.
@UpTheCreek sadly appears so. I had to switch it out for a compatible version. We can dream.
28

In modern browsers, this has become a lot easier, thanks to the URLSearchParams interface. This defines a host of utility methods to work with the query string of a URL.

Assuming that our URL is https://example.com/?product=shirt&color=blue&newuser&size=m, you can grab the query string using window.location.search:

const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m

You can then parse the query string’s parameters using URLSearchParams:

const urlParams = new URLSearchParams(queryString);

Then you can call any of its methods on the result.

For example, URLSearchParams.get() will return the first value associated with the given search parameter:

const product = urlParams.get('product')
console.log(product);
// shirt

const color = urlParams.get('color')
console.log(color);
// blue

const newUser = urlParams.get('newuser')
console.log(newUser);
// empty string

You can use URLSearchParams.has() to check whether a certain parameter exists:

console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false

For further reading please click here.

Comments

11

The plain javascript code sample which answers your question literally:

return location.search.indexOf('q=')>=0;

The plain javascript code sample which attempts to find if the q parameter exists and if it has a value:

var queryString=location.search;
var params=queryString.substring(1).split('&');
for(var i=0; i<params.length; i++){
    var pair=params[i].split('=');
    if(decodeURIComponent(pair[0])=='q' && pair[1])
        return true;
}
return false;

1 Comment

The first example will return true for fooq=bar
6

one more variant, but almost the same as Gumbos solution:

var isDebug = function(){
    return window.location.href.search("[?&]debug=") != -1;
};

Comments

4

Try this

//field "search";
var pattern = /[?&]search=/;
var URL = location.search;

if(pattern.test(URL))
{
    alert("Found :)");
}else{
    alert("Not found!");
}

JSFiddle: https://jsfiddle.net/codemirror/zj4qyao2/

Comments

3

this function help you to get parameter from URL in JS

function getQuery(q) {
    return (window.location.search.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1];
}

Comments

0

I've used this library before which does a pretty good job of what you're after. Specifically:-

qs.contains(name)
    Returns true if the querystring has a parameter name, else false.

    if (qs2.contains("name1")){ alert(qs2.get("name1"));}

Comments

0

This should help:

function getQueryParams(){
    try{
        url = window.location.href;
        query_str = url.substr(url.indexOf('?')+1, url.length-1);
        r_params = query_str.split('&');
        params = {}
        for( i in r_params){
            param = r_params[i].split('=');
            params[ param[0] ] = param[1];
        }
        return params;
    }
    catch(e){
       return {};
    }
}

Comments

0

Update on the accepted answer, you should probably just return the if conditions, rather than explicitly returning true/false:

const field = 'q';
const url = window.location.href;
return url.indexOf(`?${field}=`) !== -1 || url.indexOf(`&${field}=`) !== -1;

I interpolated the strings, but you can also just add them together as in the accepted answer.

Comments

0

In my case, I wanted to get the value of q as well. I ended up doing this. I hope anyone find this helpful.

    if(/[?&]q=/.test(location.search)) {
        const params = new URLSearchParams(location.search);
        return params.get('q');
    }

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.