JavaScript – Check If URL Contains Query String

The post shows you an easy to check whether a URL contains query string or not with JavaScript.

To do this in JavaScript we can either check window.location.search property or use Regex to check the current URL. Let’s take a look into below source to see how it works.

1. Check window.location.search

This approach is we can check the result of window.locaiton.search property. The search property returns querystring a part of current URL. Here are two examples about it.

Example 1:

Assume that the current URL is:

https://bytenota.com/contact?name=David&age=20

The result of search property is:

?name=David&age=20

Example 2:

Assume that the current URL is:

https://bytenota.com/contact

The result of search property is an EMPTY string.

Here is code using the search property approach:

function detectQueryString() {
    var currentQueryString = window.location.search;
    if (currentQueryString) {
        return true;
    } else {
      return false;
    }
}

You can see live version of this approach here by clicking on the “Run Example” button.

approach1.htmlRun Example

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript – Check If URL Contains Query String | ByteNota</title>
</head>
<body>
    <h3>Current URL:</h3>
    <p id="url"></p>
    <h3>Result:</h3>
    <p id="result"></p>
	
    <script type="text/javascript">
    
        function detectQueryString() {
			var currentQueryString = window.location.search;
			if (currentQueryString) {
				return true;
			} else {
			    return false;
			}
		}


        document.getElementById('url').innerHTML = window.location.href;
		
        if (detectQueryString()) {
            document.getElementById('result').innerHTML = 'The current URL contains query string.';
        } else {
            document.getElementById('result').innerHTML = 'The current URL does not contain query string.';
        }
		
    </script>
		
		
		
	<br><br><div><a href="https://bytenota.com/javascript-check-if-url-contains-query-string/" target="_blank" rel="noopener">← Back to the post.</a></div>
</body>
</html>

This first approach is not suitable if you want to check a given URL. To do this you can consider the below Regex approach.

2. Use Regex to check a given URL

This approach is we will use regex to check an URL. The first we will need to define a regex pattern for detecting querystring.

/\?.+=.*/g

The above simple regex will check whether the URL contain ? character and querystring name/value pair. If yes, the URL definitely contains a query string and vice versa.

Here is code using regex approach:

function detectQueryString(url) {
    // regex pattern for detecting querystring
    var pattern = new RegExp(/\?.+=.*/g);
    return pattern.test(url);
}

You can see live version of this approach here by clicking on the “Run Example” button.

approach2.htmlRun Example

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript – Check If URL Contains Query String | ByteNota</title>
</head>
<body>
	<h2>* Example 1:</h3>
    <h3>Current URL:</h3>
    <p id="url1"></p>
    <h3>Result:</h3>
    <p id="result1"></p>
	
	<h2>* Example 2:</h3>
    <h3>URL:</h3>
    <p id="url2"></p>
    <h3>Result:</h3>
    <p id="result2"></p>
	
    <script type="text/javascript">
    
        function detectQueryString(url) {
            // regex pattern for detecting ? character
            var pattern = new RegExp(/\?.+=.*/g);

            return pattern.test(currentUrl);
        }
	
		// example 1
        document.getElementById('url1').innerHTML = window.location.href;
		
		// get the current URL
        var currentUrl = window.location.href;
		
        if (detectQueryString(currentUrl)) {
            document.getElementById('result1').innerHTML = 'The current URL contains query string.';
        } else {
            document.getElementById('result1').innerHTML = 'The current URL does not contain query string.';
        }
		
		
		// example 2
        document.getElementById('url2').innerHTML = window.location.href;
		
		// get the current URL
        var url2 = 'https://bytenota.com/contact?name=David&age=20';
		
        if (detectQueryString(url2)) {
            document.getElementById('result2').innerHTML = 'The given URL contains query string.';
        } else {
            document.getElementById('result2').innerHTML = 'The given URL does not contain query string.';
        }

    </script>
</body>
</html>

1. Check window.location.search

2. Use Regex to check a given URL

LOVE THE POST? SHARE IT!

You'll probably like...