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 take the name of the argument and return value of it.

In the 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 with JavaScript.

Read and Get Parameters from 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 while 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 read parameters from current page URL using location.search.

For example – if the current tab URL is demo.makitweb.com/readUrl/index.html?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 use for check the URL have 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 have parameter then loop through all URL variable and storing it to 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, if 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( 'demo.makitweb.com/readUrl/index.html?num1=43&num2=78' ); // Passing URL

If you didn’t pass any parameter then it read parameter from 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 duplicate parameter then the value is being replaced by last one.
  • If there is no parameter in URL string then it prints No argument found a message on the screen.

3. Demo

Enter valid URL in the Textbox and click on the Button.

If you want to view reading parameter from current tab URL then click here and try to change or remove the parameters from URL.

Click the Download Button for downloading, the demonstration code.


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 a variable.

Before using this code within your project make sure that it works fine according to your requirement.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *