Check if the URL Bar Contains a Specified or Given String in JavaScript and jQuery

The URL bar or the Address bar of a web browser contains the address of a website. The URL also contains parameters or arguments, which we often define dynamically to communicate with elements or objects on a web page. Sometimes we need extract the data that we pass to the URL as parameters. Here I’ll show you how to check if the URL bar contains a given or specified string or text or value using JavaScript “indexOff()” method.

Check if a URL contains a given string or value using JavaScript

You will need this if you are working on a web site that depends on data extracted from the URL. You can extract or read URL parameters at the Server side in Asp.Net (such as using QueryString) and using JavaScript methods at the client side itself.

See this Demo

Whether you are using jQuery or JavaScript for your frontend, you can simply use the indexOf() method with the href property using windows.location object.

Syntax for indexOff()

string.indexOff(searchvalue)

The method indexOff() returns the position (a number) of the first occurrence of a given string. It will return -1, if it finds nothing that matches the given string.

You can use the indexOff() method with href property of windows.location object. For example,

var t = window.location.href.indexOf('&book=');

If the method finds the string &book= in the URL, it will return the location (a number) and the location to the variable t.

Note: The character & indicates that I am passing an extra parameter to the URL.

Now, let’s see an example.

I wish to check if the URL contains the parameter ?book= in jQuery. My script would be …

The Script
if (window.location.href.indexOf('?book=') > 0) {
    // ... do something
}

Here’s a complete Markup with the Script to check using jQuery.

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 </head>
<body>
    <input id="bt" type="button" value="Check URL" />
</body>
<script>
    $(document).ready(function () {
        $("#bt").on("click", function () {
            if (window.location.href.indexOf('?book=') > 0) {
                console.log("The URL contains ?book");
            }
        });
    });
</script>
</html>

See this Demo

Using JavaScript

If you are using JavaScript, you’ll simply call a function using the button’s clicks event. For example

<input id="bt" type="button" onclick="checkUrl()" value="Check URL" />

<script>
    function checkUrl() {
        if (window.location.href.indexOf('?book=') > 0) {
            console.log("The URL contains ?book");
        }
    }
</script>

The result will be the same as we saw using jQuery.

In my next post, I’ll show you with an example on how to replace a given string with another string in the URL bar using JavaScript or jQuery.

Thanks for reading.

Related Posts:

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!