How to Retrieve the Value of a URL Parameter in JavaScript

From WikiHTP

JavaScript is not designed to handle URL parameters. This is a task that is supported in principle by languages ​​executed by the server, such as PHP or ASP. More and more sites are designed entirely in JavaScript. Therefore, It becomes necessary to be able to retrieve the parameters of a URL.

Using location.search Attribute[edit]

To perform this operation, use the location.search attribute. It contains the list of URL parameters that follow either the? Character or the # fragment character, whichever comes first. It is then necessary to separate the different parameters things to the character &. For each parameter, it is necessary to test whether it is the first, the second or an additional value for this parameter, in which case an array is required. To save time in using this function, you can store it in a global variable to be able to use it more easily in the code of your page. Remember in any case to use the function decodeURIComponent() which will decode the parameters encoded in the URL. URL: http://www.mysite.com/page.php?par1=val1&par2=val2&par2=val3&par3=val4

//JavaScript
var parametersURL = function ()
{
   // The function is executed immediately and the value is stored in parametersURL 
    var parameters = {};
   // Get the parameters of the query, removing the first character
    var request = window.location.search.substring(1);
    var vars = request.split(&);
    for (var i=0;i<vars.length;i++)
    {
       var couple = vars[i].split(=);
       // For the first entry, we add the key / value pair
       if (typeof parameters[couple[0]] === undefined)
       {
          parameters[couple[0]] = decodeURIComponent(couple[1]);
       }
        // If this is the second entry, change the parameter to a table
       else if (typeof parameters[couple[0]] === string)
       {
         var tableau = [parametres[couple[0]],decodeURIComponent(couple[1])];
         parameters[couple[0]] = tableau;
       }
       // From the third, add it to the table
       else
       {
         parameters[couple[0]].push(decodeURIComponent(couple[1]));
       }
     }
 return parameters;
}();
//Use
alert(parametersURL.par1);

Using Regular Expressions[edit]

Another faster solution is to use regular expressions. First, you must transform the + characters into spaces so that they do not pose a problem when using the regular expression. The exec() function will make it possible to browse the results of the regular expression as long as it exists in the browser request.

function getRequestParameters(browserRequest)
{
 // We turn the + into spaces
 browserRequest = browserRequest.split('+').join('');
 var parameters = {};
 var elements;
 var regularExpression = /[?&]?([^=]+)=([^&]*)/g;
 while (elements = regularExpression.exec(browserRequest))
 {
   parameters[decodeURIComponent(elements[1])] = decodeURIComponent(elements[2]);
 }
 return parameters;
}
//Use
var request = getRequestParameters(document.location.search);
alert(request.par1);

About This Tutorial

This page was last edited on 28 January 2019, at 06:36.