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
In JavaScript, I am creating a single function which works in both cases –
- Reading parameters of current Tab URL
- 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
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.