Javascript Location Search with Examples

Updated on 22 Mar 2012,
Published on 11 Jul 2008

Javascript location search property sets or returns the query string variable from the "?" question mark in the current URL. Location search property can change the values for query string variables that can in turn change the dynamic output of the current URL. Suppose your web page is working as search page for your whole website and you pass the query string variable e.g.: "?q=keyword". Javascript location search returns this value that you can modify to generate different dynamic output on the same page. You can use simply location object to access the search property or you can use window object to access search via location.

JavaScript Window Location Object Examples:

You can see the live samples and examples of JavaScript Window Location Object from the following links:

Syntax for Javascript Location Search Property

location.search

window.location.search

You can set the location.search by assigning new string to the values retrieved from the "?" question mark of current URL:

e.g.:

location.search = "value";

Example of Javascript Location Search Property

<html>
<head>
    <title>Javascript Location Search</title>
    <script type="text/javascript" language="javascript">
        function getLocationSearch() {
            document.getElementById("div1").innerHTML = window.location.search;
        }

        function setLocationSearch(valueObj) {
            window.location.search = valueObj;
        }
    </script>
</head>
<body onload="getLocationSearch();">
    <div id="div1">
    </div>
    <br />
    <br />
    <input type="button" id="btn" 
            value="Set New Location Search" 
            onclick="setLocationSearch('?q=new-value');" />
    <br />
    <br />
    <input type="button" id="Button1" 
            value="Set Old Location Search" 
            onclick="setLocationSearch('?q=old-value');" />
</body>
</html>

Above example will display nothing as location.search return value. If you will click on first button control then it will display the output: "?q=new-value". A click on second button control will set the location.search property value as "?q=old-value".

Output:

You can see the output of above discussed code from the following link:

JavaScript window.location.search

Continue to next tutorial: Javascript Location Search Substring to learn how to split and extract the QueryString parameter name and values using JavaScript.

Previous Tutorial

Next Tutorial