How to get the value from the GET parameters?

Question

How to get the value from the GET parameters?

Question

I have a URL with some GET parameters as follows:

www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5

I need to get the whole value of c. I tried to read the URL, but I got only m2. How do I do this using JavaScript?

joe

2020/01/17

Read less...

Most implementations I've seen miss out URL-decoding the names and the values.

Here's a general utility function that also does proper URL-decoding:

function getQueryParams(qs) {
    qs = qs.split('+').join(' ');

    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

//var query = getQueryParams(document.location.search);
//alert(query.foo);

Ates Goral

2015/06/05

source

function gup( name, url ) {
    if (!url) url = location.href;
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
}
gup('q', 'hxxp://example.com/?q=abc')

Haim Evgi

2020/01/20

This is an easy way to check just one parameter:

Example URL:

http://myserver/action?myParam=2

Example Javascript:

var myParam = location.search.split('myParam=')[1]

if "myParam" exists in the URL... variable myParam will contain "2", otherwise it will be undefined.

Maybe you want a default value, in that case:

var myParam = location.search.split('myParam=')[1] ? location.search.split('myParam=')[1] : 'myDefaultValue';

Update: This works better:

var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
var result = captured ? captured : 'myDefaultValue';

And it works right even when URL is full of parameters.

mzalazar

2020/07/09

Browsers vendors have implemented a native way to do this via URL and URLSearchParams.

let url = new URL('http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('c'));  // outputs "m2-m3-m4-m5"

Currently supported in Firefox, Opera, Safari, Chrome and Edge. For a list of browser support see here.

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

https://url.spec.whatwg.org/

Eric Bidelman, an engineer at Google, recommends using this polyfill for unsupported browsers.

cgatian

2018/10/17

I found this ages ago, very easy:

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    
    function(m,key,value) {
      vars[key] = value;
    });
    return vars;
  }

Then call it like this:

var fType = getUrlVars()["type"];

VaMoose

2013/11/20

Quentin · Accepted Answer · 5/4/2019 7:25:55 PM

JavaScript itself has nothing built in for handling query string parameters.

Code running in a (modern) browser you can use the URL object (which is part of the APIs provided by browsers to JS):

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);

For older browsers (including Internet Explorer), you can use this polyfill or the code from the original version of this answer that predates URL:

You could access location.search, which would give you from the ? character on to the end of the URL or the start of the fragment identifier (#foo), whichever comes first.

Then you can parse it with this:

function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

You can get the query string from the URL of the current page with:

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

How to get the value from the GET parameters?

Question

Accepted Answer

Related Url

Learning Tools