Blogs

JavaScript get URL Parameters

Written by: Zubayr


In this tutorial, I will tell you about how you can get URL parameters with javascript.

Passing URL parameters is a nice way to move from one page to another. As we know URL is string in which there are certain variables present which are used to move forward to the new page. You can get it by checking in URL string the text written after question mark shows the variable name, value pair follow separated by an ampersand.

JavaScript Get URL Parameters

The disadvantage of using this method is that it is visible to the user and anyone can manipulate it by manual editing. There are some other secure ways that we can do this is by using post method, session cookies, or database to store the variables.

Basically, for this, we have to understand how it is passed.

There are various ways buy which we can fetch the parameters from url, lets have a look on them one by one.

JavaScript Get URL Parameters

Method 1:

First way is by using searchParams javascript method. This method is used to get value of particular variable.

<textarea></textarea>

1

2

3

4

var link = "http://www.steadyadvice.net/t.html?stack=hello&pop=data&link=hello";

var  extractParameter= new URL(link);

var  final = extractParameter.searchParams.get("link");

console.log(final);

You can get the current link by using [removed].href, just replace link variable string with this method.

Method 2:

Another way is by using split method.

<textarea></textarea>

1

2

3

var urlLink = 'http://www.steadyadvice.net/t.html?stack=hello&pop=data&link=hello';

var query_paramter = urlLink.split("?")[1];  

console.log(query_paramter);

 

Method 3:

The third way is by using the regular expression.

<textarea></textarea>

1

2

3

4

5

6

7

8

9

10

function getUrlVars( name, link ) {

    if (!link) link = location.href;

    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

    var regexS = "[\\?&]"+name+"=([^&#]*)";

    var regex = new RegExp( regexS );

    var results = regex.exec( url );

    return results == null ? 'Empty' : results[1];

}

 

console.log(getUrlVars('text', 'steadyadvice.net/?a=11&txt=world'));

In this method, I also handled that if at some instance parameter is missing then it returns undefined which is a bad coding practice. So to correct this we first check that particular parameter is present or not. If not present then send some default value.

So there are some characters that can not pass through URL like suppose we write a space in the link and press enter key then space will be replaced by code. So it is also important to encode and decode the URL parameters. There are the following functions you can use to do this. In these functions, you have to pass URL string.

To decode use decodeURI(urlValue) and to encode use encodeURI(urlValue).

Comment down below if you know any other way to fetch url parameters in javascript.

Comments
  • Brigida

    I have been browsing on-line greater than three hours these days, but I by no means found any attention-grabbing article like yours. It is beautiful value sufficient for me. Personally, if all web owners and bloggers made excellent content as you did, the internet might be a lot more helpful than ever before. Does your blog have a contact page? I'm having trouble locating it but, I'd like to send you an e-mail. I've got some creative ideas for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it develop over time. It is appropriate time to make a few plans for the long run and it is time to be happy. I’ve learn this publish and if I may just I want to counsel you few interesting things or tips. Maybe you could write subsequent articles relating to this article. I desire to read more things approximately it! http://plumbing.com

    • Zubayr Ganiyu

      Hello Brigida thank you for your kind words. We have a contact section here if you can not see it here is the link to contact me. http://zubdev.net/contact

Leave A Comment
Post title