Using the GET parameter of a URL in JavaScript [du

问题:

This question already has an answer here:

• How to retrieve GET parameters from javascript? [duplicate] 17 answers

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?

回答1:

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>

回答2:

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];

回答3:

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>

回答4:

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\'));

回答5:

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( \"&\" )

回答6:

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\'] ?>\';

回答7:

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

回答8:

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

回答9:

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));

回答10:

You can use this function

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

回答11:

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!