Using the GET parameter of a URL in JavaScript

Question

If I am on a page such as

http://somesite.com/somepage.php?param1=asdf

In the JavaScript of that page, I would like to set a variable to the value of the parameter in the GET part of the URL.

So in JavaScript:

<script>
   param1var = ...   // ... would be replaced with the code to get asdf from URI
</script>

What would "..." be?

check best ans here without regular expression stackoverflow.com/questions/19491336/get-url-parameter-jquery/… – Sameer Kazi — Sameer Kazi, Apr 17 '15 at 03:24
Here's a simple solution : http://mycodingtricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/ — Shubham Kumar, May 09 '16 at 06:21

score 105 · Accepted Answer · answered May 05 '09 at 23:25

105

Here's some sample code for that.

<script>
var param1var = getQueryVariable("param1");

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
  alert('Query Variable ' + variable + ' not found');
}
</script>

answered May 05 '09 at 23:25

Jose Basilio

50,714
13
121
117

11

You should probably call `decodeURIComponent` on `pair[1]` before returning it, and ideally on `pair[0]` before comparing it to variable. – Mike Samuel May 10 '12 at 15:53
1

There is a much neater way these days: `const urlParams = new URL("https://example.com/?product=trousers&color=black&newuser&size=s").searchParams; const product = urlParams.get('product'); console.log(product);` – Ian Robertson Jul 20 '23 at 14:56

score 12 · Answer 2 · answered May 05 '09 at 23:30

12

You can get the "search" part of the location object - and then parse it out.

var matches = /param1=([^&#=]*)/.exec(window.location.search);
var param1 = matches[1];

answered May 05 '09 at 23:30

gnarf

105,192
25
127
161

Gatsbimantico · Answer 3 · 2015-01-28T20:30:17.907

I made this variation of gnarf's solution, so the call and the result is similar to PHP:

function S_GET(id){
    var a = new RegExp(id+"=([^&#=]*)");
    return decodeURIComponent(a.exec(window.location.search)[1]);
}

But as being called in a function slows the process, its better to use as global:

window['var_name'] = decodeURIComponent( /var_in_get=([^&#=]*)/.exec(window.location.search)[1] );

UPDATE

As I'm still learning JS, I created a better answer in a more JS behaviour:

Url = {
    get get(){
        var vars= {};
        if(window.location.search.length!==0)
            window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value){
                key=decodeURIComponent(key);
                if(typeof vars[key]==="undefined") {vars[key]= decodeURIComponent(value);}
                else {vars[key]= [].concat(vars[key], decodeURIComponent(value));}
            });
        return vars;
    }
};

This allows to be called just using Url.get.

Example The url ?param1=param1Value&param2=param2Value can be called like:

Url.get.param1 //"param1Value"
Url.get.param2 //"param2Value"

here is a snipet:

// URL GET params
url = "?a=2&a=3&b=2&a=4";

Url = {
    get get(){
        var vars= {};
        if(url.length!==0)
            url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value){
                key=decodeURIComponent(key);
                if(typeof vars[key]==="undefined") {vars[key]= decodeURIComponent(value);}
                else {vars[key]= [].concat(vars[key], decodeURIComponent(value));}
            });
        return vars;
    }
};

document.querySelector('log').innerHTML = JSON.stringify(Url.get);

<log></log>

+1 for being similar to my version (which doesn't use a temp var and encodes the parameter value) and the interesting performance tip in a humorously inappropriate context. — Cees Timmerman, Jul 16 '13 at 16:18

score 2 · Answer 4 · answered May 28 '12 at 09:56

2

Here's how you could do it in Coffee Script (just if anyone is interested).

decodeURIComponent( v.split( "=" )[1] ) if decodeURIComponent( v.split( "=" )[0] ) == name for v in window.location.search.substring( 1 ).split( "&" )

answered May 28 '12 at 09:56

Jasper Kennis

3,225
6
41
74

score 2 · Answer 5 · answered May 05 '09 at 23:30

From my programming archive:

function querystring(key) {
   var re=new RegExp('(?:\\?|&)'+key+'=(.*?)(?=&|$)','gi');
   var r=[], m;
   while ((m=re.exec(document.location.search)) != null) r[r.length]=m[1];
   return r;
}

If the value doesn't exist, an empty array is returned.
If the value exists, an array is return that has one item, the value.
If several values with the name exists, an array containing each value is returned.

Examples:

var param1var = querystring("param1")[0];

document.write(querystring("name"));

if (querystring('id')=='42') alert('We apoligize for the inconvenience.');

if (querystring('button').length>0) alert(querystring('info'));

msand · Answer 6 · 2012-12-24T02:09:24.203

Here is a version that JSLint likes:

/*jslint browser: true */
var GET = {};
(function (input) {
    'use strict';
    if (input.length > 1) {
        var param = input.slice(1).replace(/\+/g, ' ').split('&'),
            plength = param.length,
            tmp,
            p;

        for (p = 0; p < plength; p += 1) {
            tmp = param[p].split('=');
            GET[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
        }
    }
}(window.location.search));

window.alert(JSON.stringify(GET));

Or if you need support for several values for one key like eg. ?key=value1&key=value2 you can use this:

/*jslint browser: true */
var GET = {};
(function (input) {
    'use strict';
    if (input.length > 1) {
        var params = input.slice(1).replace(/\+/g, ' ').split('&'),
            plength = params.length,
            tmp,
            key,
            val,
            obj,
            p;

        for (p = 0; p < plength; p += 1) {
            tmp = params[p].split('=');
            key = decodeURIComponent(tmp[0]);
            val = decodeURIComponent(tmp[1]);
            if (GET.hasOwnProperty(key)) {
                obj = GET[key];
                if (obj.constructor === Array) {
                    obj.push(val);
                } else {
                    GET[key] = [obj, val];
                }
            } else {
                GET[key] = val;
            }
        }
    }
}(window.location.search));

window.alert(JSON.stringify(GET));

score 0 · Answer 7 · answered Mar 31 '14 at 21:35

0

You can use this function

function getParmFromUrl(url, parm) {
    var re = new RegExp(".*[?&]" + parm + "=([^&]+)(&|$)");
    var match = url.match(re);
    return(match ? match[1] : "");
}

answered Mar 31 '14 at 21:35

Reza

18,865
13
88
163

score 0 · Answer 8 · answered Jun 18 '14 at 17:01

If you're already running a php page then

php bit:

    $json   =   json_encode($_REQUEST, JSON_FORCE_OBJECT);
    print "<script>var getVars = $json;</script>";

js bit:

    var param1var = getVars.param1var;

But for Html pages Jose Basilio's solution looks good to me.

Good luck!

Mark · Answer 9 · 2021-07-29T13:20:55.793

0

EDIT: DON'T DO THIS I decided to leave this here as an example of what you shouldn't do

You don't need to do anything special, actually. You can mix JavaScript and PHP together to get variables from PHP straight into JavaScript.

var param1val = '<?php echo $_GET['param1'] ?>';

edited Jul 29 '21 at 13:20

answered Sep 09 '14 at 00:40

Mark

1,258
13
25

2

This is how XSS attacks occur – MeatPopsicle Jul 28 '21 at 16:39
4

@MeatPopsicle Yeaah I guess I was a bit naïve 7 years ago ;-) If you could downvote it I can leave the answer as an example of what *not* to do – Mark Jul 29 '21 at 13:18

score 0 · Answer 10 · answered May 05 '09 at 23:25

0

Using jquery? I've used this before: http://projects.allmarkedup.com/jquery_url_parser/ and it worked pretty well.

answered May 05 '09 at 23:25

marcc

12,295
7
49
59

Unfortunately not (not my choice). – RobKohr May 05 '09 at 23:27
Original link dead, updated link: https://github.com/allmarkedup/purl – Feb 26 '14 at 09:51

score 0 · Answer 11 · answered May 05 '09 at 23:30

This looked ok:

function gup( name ){
   name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
   var regexS = "[\\?&]"+name+"=([^&#]*)";
   var regex = new RegExp( regexS );
   var results = regex.exec( window.location.href );
   if( results == null )
      return "";
   else
      return results[1];
}

From http://www.netlobo.com/url_query_string_javascript.html

Using the GET parameter of a URL in JavaScript

11 Answers11

Linked

Related