题 如何从GET参数中获取值?


我有一个带有一些GET参数的URL,如下所示:

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

我需要获得全部价值 c。我试图读取URL,但我只是 m2。如何使用JavaScript执行此操作?


931
2018-06-11 08:32


起源


可能重复 如何从location.search获取特定参数? - sag


答案:


JavaScript本身没有内置处理查询字符串参数的内容。

在(现代)浏览器中,您可以使用 URL 目的;

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


对于旧版浏览器(包括Internet Explorer),您可以使用 这种polyfill 或者此答案的原始版本中的代码 URL

你可以访问 location.search,这会给你的 ? 字符串到URL的末尾或片段标识符的开头(#foo),以先到者为准。

然后你可以解析它:

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

您可以从当前页面的URL获取查询字符串:

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

1241
2018-06-11 08:37



我在polyfill URL上收到错误,这是另一个工作链接 github.com/lifaon74/url-polyfill 对于IE10 + - Ash


我见过的大多数实现都错过了URL解码名称和值。

这是一个通用的实用函数,也可以进行正确的URL解码:

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

225
2017-07-08 18:04



此代码不起作用。它会创建一个无限循环,因为正则表达式是在循环定义中编译的,它会重置当前索引。如果将正则表达式放在循环外部的变量中,它可以正常工作。 - maxhawkins
@maxhawkins:它可以在某些浏览器中运行,而在其他浏览器中会进入无限循环。在这方面,你是对的。我将修复代码为跨浏览器。感谢您指出了这一点! - Ates Goral
@ZiTAL此函数用于URL的查询部分,而不是整个URL。请参阅下面注释掉的用法示例。 - Ates Goral
@Harvey不区分大小写不是查询参数的问题。这听起来像应用程序特定的东西,应该与查询参数提取一起应用,或者在查询参数提取之上。 - Ates Goral
为什么 qs.split('+').join(' '); 并不是 qs.replace(/\+/g, ' '); ? - FlameStorm


资源

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

204
2018-06-11 08:38



我最喜欢这个选项,但更喜欢返回null或结果,但不是空字符串。 - Jason Thrasher
看起来你有一些额外的逃脱字符。 “\\[“ 应该 ”\[”。由于这些是常规字符串,[和]不需要转义。 - Dwayne
这不是不区分大小写的。我在哪里添加“i”以使其不区分大小写? - zeta
alert(gup('UserID',window.location.href)); - Arun Prasad E S
请引用您的来源: netlobo.com/url_query_string_javascript.html - Mottie


这是检查一个参数的简单方法:

示例网址:

    http://myserver/action?myParam=2

示例Javascript:

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

如果URL中存在“myParam”...变量myParam将包含“2”,否则它将是未定义的。

在这种情况下,也许你想要一个默认值:

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

更新: 这效果更好:

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

即使URL充满参数,它也能正常工作。


169
2017-12-02 19:19



这只适用于您抓取的参数是URL中的最后一个参数,您不应该依赖它(即使您只需要一个参数)。例如 http://myserver/action?myParam=2&anotherParam=3 不会屈服 "2" 但 "2&anotherParam=3"。 - Glacials
(location.search.split('myParam=')[1]||'').split('&')[0]  - 使用 多个参数 要么 可能性缺失  myParam。 - Gábor Imre
要么 location.search.split('myParam=').splice(1).join('').split('&')[0] - J.Steve
您可以通过前缀获得更高的精度并允许任何参数顺序 [?|&] 如在 [?|&]myParam=([^&]+) - 1.21 gigawatts
您可能需要解码该值 result = decodeURIComponent(result); - 1.21 gigawatts


浏览器供应商已经通过URL和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"

目前支持Firefox,Opera,Safari和Chrome。有Edge支持 快来了

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,Google的工程师, 建议 用这个 填充工具 对于不受支持的浏览器。


84
2018-02-18 17:52



根据MDN链接Safari支持URL但不支持URLSearchParams。 - south-summit
@Markouver不是polyfill照顾的吗?顺便说一句,Safari是现代的IE6 - Csaba Toth
为什么是 new URLSearchParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5").get('a') 回国 null 为了我? (在Chrome上稳定)。 b 和 c 似乎运作良好。 - ripper234
更新的答案。我原来的答案是没有正确使用URLSearchParams,因为它只是设计用于URL的查询字符串部分。 - cgatian
Chrome可以,但不能使用Safari。 - R. Canser Yanbakan


您可以在中获取查询字符串 location.search,然后你可以在问号后分割所有内容:

var params = {};

if (location.search) {
    var parts = location.search.substring(1).split('&');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}

// Now you can get the parameters you want like so:
var abc = params.abc;

74
2018-06-11 08:37



URL解码参数名称和值怎么样? - Ates Goral
此方法不处理数组。例如。 ?array[]=1&array[]=2 产生 {"array[]": "2"},这显然是错误的。 - Kafoso
@Kafoso这里没有明确的对错。首先,具有相同名称的重复字段没有指定的标准行为,并且由解析器来处理。另外, [] 模式在某些情况下(例如,PHP)仅具有意义,而在其他情况下则不具有意义。所以不是“明显错误” - 只是没有实施来处理您可能需要或可能不需要处理的非标准情况。 - Blixt


我很久以前就发现了这个问题:

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

然后这样称呼它:

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

69
2017-11-20 14:01



+1伟大的解决方案 - 优雅,高效和智能是使用条款。为了我的目的,比其他公认的解决方案更好 - Elemental
非常好,它也可以使用location.search而不是window.location.href - Fabio C.
创造这个的重点是什么? parts 变量? - Andi
@pdxbmw没用,应该删除。代码看起来似乎很聪明,但是没有经过深思熟虑。改进:使用 decodeURIComponent() 价值,因为这是你通常想要合作的东西;使用 window.location.search 代替 window.location.href,因为你只对参数感兴趣,而不是整个网址。 - Leif
@Leif建议很有效。我输入了ID#142,因为在URL的末尾是单击按钮时生成的#。离开这样的功能 var vars = {}; window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; - Andres Ramos