Read and Get Parameters from URL with JavaScript

If you are familiar with PHP where for reading parameters from URL you can use either $_GET or $_REQUEST which takes the name of the argument and return value of it.

In JavaScript, there is no direct way to read arguments from URL like in PHP you need to do some work for getting it.

In this tutorial, I show how you can read and extract parameters from a URL with JavaScript.

Contents

1. Reading URL
2. More about Function
3. Demo
4. Conclusion

1. Reading URL

In JavaScript, I am creating a single function which works in both cases –

1.  Reading parameters of current Tab URL
2.  Reading parameters of user-defined URL

# Create a Function

Creating a function readUrl() which takes a single argument. Below is the completed code of the function.

Completed Code

function readUrl(url){
 
 var para_str = '';

 // Checking url is defined or not
 if(url == undefined){
  /* url variable is not defined */
  // get url parameters
  url = location.search; // e.g. ?num1=43&num2=23
  var parts = url.substring(1).split('&');
  para_str = parts[0];
 
 }else{

  /* url variable is defined */
  var split_url = url.split('?');
  para_str = split_url[1];
  if(para_str != undefined){
   var parts = para_str.split('&');
  } 
 }
 
 // Check arguments are defined or not
 if( para_str != undefined && para_str != '' ){
  var parameter_obj = {}; // Object
 
  // looping through all arguments and store in Object
  for(var i=0;i<parts.length;i++){
   var split_val = parts[i].split('=');
 
   // Check argument is available or not e.g. ?num1=43&
   if(split_val[0] == undefined || split_val[0] == '' )
     continue;
   var value = split_val[1];
   // Check value is available or not e.g. ?num1=43&num2= or ?num1=43&num2
   if(value == undefined){
     value = ""; // Assign space if value is not defined
   }

   parameter_obj[split_val[0]] = value; 
   
  }
 
  // Print all arguments
  for(var val in parameter_obj){
   $("ul").append("<li>" + val + ' = ' + parameter_obj[val] + "</li>");
  }
 
 }else{
  $("ul").append('<li>No arugment found</li>');
 }
 
}

# How function works –

The function works either its argument is defined or not.

When an argument is not defined while calling

If the URL is not specified then it reads parameters from the current page URL using location.search.

For example – if the current tab URL is https://makitweb.com/demos/readUrl/index.php?num1=43&num2=23 then it will returns ?num1=43&num2=23.

Now, we split the return value by & and storing 0 index position value to a variable para_str which is used to check the URL has the parameter or not.

// get url parameters
 url = location.search; // e.g. ?num1=43&num2=23
 var parts = url.substring(1).split('&');
 para_str = parts[0];

If the URL has a parameter then loop through all URL variable and storing it in Object parameter_obj variable.

// looping through all arguments and store in Object
for(var i=0;i<parts.length;i++){
 var split_val = parts[i].split('=');
 
 // Check argument is available or not e.g. ?num1=43&
 if(split_val[0] == undefined || split_val[0] == '' )
  continue;
 var value = split_val[1];
 // Check value is available or not e.g. ?num1=43&num2= or ?num1=43&num2
 if(value == undefined){
  value = ""; // Assign space if value is not defined
 }
 parameter_obj[split_val[0]] = value; 
}

After successfully Object initialization display it in the unordered list.

When an argument is defined while calling

If the URL is specified then first split it by ? character and storing its 1 index position value to para_str variable e.g. num1=43&num2=23. If the parameter is defined within URL then splitting it by &.

var split_url = url.split('?');
para_str = split_url[1];
if(para_str != undefined){
 var parts = para_str.split('&');
}

After that, the process of parameter extraction is similar to the undefined case.

Note – When the parameter value is not fully defined e.g. ?num1=43&num2 or ?num1=43&num2=. In this cases, I am replacing the undefined value with space ('') you can replace it some other value.

if(value == undefined){
 value = ""; // Assign space if value is not defined
}

# Calling

You can either call the function with or without any arguments.

readUrl(); // No passing any parameter
readUrl( 'https://makitweb.com/demos/readUrl/index.php?num1=43&num2=78' ); // Passing URL

If you didn’t pass any parameter then it read parameter from the current tab URL.

2. More about Function

• Passing URL to the function must be valid.
• The function even works when the parameter is not fully defined e.g. ?num1=43&num2= or ?num1=43&num2
• When the URL contains a duplicate parameter then the value is being replaced by the last one.
• If there is no parameter in URL string then it prints No argument found a message on the screen.

3. Demo

View Demo

4. Conclusion

This requires you in some cases where you have to perform some operation based on the parameter with JavaScript.

Within the demonstration, I listed all values of the Object you can either return it from the function by defining return parameter_obj and store it in the variable.