在JavaScript中使用URL的GET参数


Using the GET parameter of a URL in JavaScript

本问题已经有最佳答案，请猛点这里访问。

如果我在一个页面上

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

在该页面的JavaScript中，我想将一个变量设置为URL的GET部分中的参数值。

所以在JavaScript中：

1
   param1var = ...   // ... would be replaced with the code to get asdf from URI

会是什么？

相关讨论

这是一些示例代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
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');
}
相关讨论

您可以获取位置对象的"搜索"部分 - 然后将其解析出来。

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

我做了gnarf解决方案的这个变种，所以调用和结果类似于PHP：

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

但是，由于在函数中调用会减慢进程，因此最好将其用作全局：

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

UPDATE

当我还在学习JS时，我在更多JS行为中创建了一个更好的答案：

1
2
3
4
5
6
7
8
9
10
11
12
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;
    }
};

这允许仅使用Url.get调用。

例
网址?param1=param1Value¶m2=param2Value
可以这样称呼：

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

这是一个snipet：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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);
1
<log></log>

相关讨论

这是你如何在咖啡脚本中做到这一点(只要有人感兴趣)。

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

从我的编程档案：

1
2
3
4
5
6
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;
}

如果该值不存在，则返回空数组。
如果值存在，则返回一个具有一个项的值的数组。
如果存在多个具有该名称的值，则返回包含每个值的数组。

例子：

1
2
3
4
5
6
7
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'));

实际上，你不需要做任何特别的事情。您可以将JavaScript和PHP混合在一起，将PHP中的变量直接导入JavaScript。

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

如果你已经在运行php页面了

php位：

1
2
    $json   =   json_encode($_REQUEST, JSON_FORCE_OBJECT);
    print"var getVars = $json;";

js位：

1
    var param1var = getVars.param1var;

但对于Html页面，Jose Basilio的解决方案对我来说很好看。

祝好运！

您可以使用此功能

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

这是JSLint喜欢的版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*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));

或者，如果您需要支持一个键的多个值，例如。 ？key = value1＆amp; key = value2你可以使用这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/*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));

看起来不错：

1
2
3
4
5
6
7
8
9
10
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];
}

来自http://www.netlobo.com/url_query_string_javascript.html

使用jquery？我以前用过这个：http：//projects.allmarkedup.com/jquery_url_parser/它运行得很好。

相关讨论