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.
<!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.
<!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>
/testpage? this fails
yeah, you are right! I fixed the regex. Thanks
Can we add URL constructor as a third solution?
const url = new URL(‘http://examplesite.com/test?test=123’)
if(url.search) …..