Javascript Location Search Substring

Updated on 22 Mar 2012,
Published on 11 Jul 2008

Values returned by Javascript location search property can be modified using javascript substring, indexof functions and string array. You can extract the values of each query string variable and value returned in the form of string by location search property. Substring function with start index value as 1 removes the "?" question mark value from the beginning of location search value retrieved. Further you can split the string from "&" sign and then extract the each parameter and its value based on the index of "=" equal to sign.

JavaScript Window Location Object Examples:

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

Example for Javascript Location Search Substring

<html>
<head>
    <title>Javascript Location Search</title>

<script type="text/javascript" language="javascript">
    function LocationSearch() {
        var queryString = new String();
        queryString = window.location.search;
        queryString = queryString.substring(1);
        document.getElementById("div1").innerHTML = queryString + "<br />";
        
        var arr1 = new Array();
        arr1 = queryString.split("&");

        var arr2 = new Array();

        for (var i = 0; i < arr1.length; i++) {
            arr2[i] = arr1[i].toString().substring(
                            arr1[i].toString().indexOf("=") + 1
                            );

            arr1[i] = arr1[i].toString().substring(
                                0,
                                arr1[i].toString().indexOf("=") 
                                );
        }

        document.getElementById("div1").innerHTML +=
                                                  arr1.concat() + "<br />";

        document.getElementById("div1").innerHTML += 
                                                  arr2.concat();
    }

    function setLocationSearch(valueObj) {
        window.location.search = valueObj;
    }
</script>

</head>
<body>
    <div id="div1">
    </div>
    <br />
    <br />
    <input type="button" 
            id="btn" 
            value="Location Search Substrings" 
            onclick="LocationSearch();" />
</body>
</html>

Assume that current URL for above example consists of location search query string parameters are:

?q1=value1&q2=value2&q3=value3

Above example will display the output as follows onclick event of button control:

q1=value1&q2=value2&q3=value3

q1,q2,q3

value1,value2,value3

This example code shows how you can use the Javascript substring, indexof functions and location.search property to get and set the query string values.

Output:

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

JavaScript window.location.search

Continue to next tutorial: Javascript Window Location Object to learn window location object porperties and methods

Previous Tutorial

Next Tutorial