如何从GET参数获取值？

我有一个带有一些GET参数的URL，如下所示：

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

我需要得到c的全部价值。 我试图读取的URL，但我只有m2 。 我如何使用JavaScript做到这一点？

Answer 1

JavaScript本身没有内置的处理查询string参数。

在（现代）浏览器中，您可以使用（写作时的实验性） 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); 

Answer 2

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

这是一个通用的实用function，也可以进行正确的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); 

Answer 3

资源

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

Answer 4

这是一个简单的方法来检查只是一个参数：

示例url：

  http://myserver/action?myParam=2 

示例Javascript：

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

如果“myParam”存在于URL …variablesmyParam将包含“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充满参数的情况下，它也能正常工作。

Answer 5

您可以在location.search获取查询string，然后您可以在问号后面分割所有内容：

 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; 

Answer 6

我发现这个年代以前，很容易：

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

然后像这样调用它：

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

Answer 7

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

Google工程师Eric Bidelman build议将这个polyfill用于不受支持的浏览器。

Answer 8

这是一个recursion的解决scheme，没有正则expression式，并具有最小的变异（只有params对象是突变的，我相信这是JS中不可避免的）。

这真棒，因为它：

• 是recursion的
• 处理多个相同名称的参数
• 非常适合格式不正确的参数string（缺失值等）
• 如果“=”在值中，则不会中断
• 执行URL解码
• 是继续！

码：

 var get_params = function(search_string) { var parse = function(params, pairs) { var pair = pairs[0]; var parts = pair.split('='); var key = decodeURIComponent(parts[0]); var value = decodeURIComponent(parts.slice(1).join('=')); // Handle multiple parameters of the same name if (typeof params[key] === "undefined") { params[key] = value; } else { params[key] = [].concat(params[key], value); } return pairs.length == 1 ? params : parse(params, pairs.slice(1)) } // Get rid of leading ? return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&')); } var params = get_params(location.search); // Finally, to get the param you want params['c']; 

Answer 9

我写了一个更简单优雅的解决scheme。

 var arr = document.URL.match(/room=([0-9]+)/) var room = arr[1]; 

Answer 10

看到这个

 function getURLParameters(paramName) { var sURL = window.document.URL.toString(); if (sURL.indexOf("?") > 0) { var arrParams = sURL.split("?"); var arrURLParams = arrParams[1].split("&"); var arrParamNames = new Array(arrURLParams.length); var arrParamValues = new Array(arrURLParams.length); var i = 0; for (i = 0; i<arrURLParams.length; i++) { var sParam = arrURLParams[i].split("="); arrParamNames[i] = sParam[0]; if (sParam[1] != "") arrParamValues[i] = unescape(sParam[1]); else arrParamValues[i] = "No Value"; } for (i=0; i<arrURLParams.length; i++) { if (arrParamNames[i] == paramName) { //alert("Parameter:" + arrParamValues[i]); return arrParamValues[i]; } } return "No Parameters Found"; } } 

Answer 11

ECMAScript 6解决scheme：

 var params = window.location.search .substring(1) .split("&") .map(v => v.split("=")) .reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map()) 

Answer 12

我用

 function getVal(str) { var v = window.location.search.match(new RegExp('(?:[\?\&]'+str+'=)([^&]+)')); return v ? v[1] : null; } 

Answer 13

我使用parseUri库。 它可以让你做到你所要求的：

 var uri = 'www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5'; var c = uri.queryKey['c']; // c = 'm2-m3-m4-m5' 

Answer 14

我做了一个这样的function：

 var getUrlParams = function (url) { var params = {}; (url + '?').split('?')[1].split('&').forEach(function (pair) { pair = (pair + '=').split('=').map(decodeURIComponent); if (pair[0].length) { params[pair[0]] = pair[1]; } }); return params; }; 

更新5/26/2017，这里是一个ES7的实现（与巴贝尔预设阶段0,1,2或3运行）：

 const getUrlParams = url => `${url}?`.split('?')[1] .split('&').reduce((params, pair) => ((key, val) => key ? {...params, [key]: val} : params) (...`${pair}=`.split('=').map(decodeURIComponent)), {}); 

一些testing：

 console.log(getUrlParams('https://google.com/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''} console.log(getUrlParams('/foo?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''} console.log(getUrlParams('?a=1&b=2&c')); // Will log {a: '1', b: '2', c: ''} console.log(getUrlParams('https://google.com/')); // Will log {} console.log(getUrlParams('a=1&b=2&c')); // Will log {} 

Answer 15

对于像这个index.html？msg = 1的单参数值，使用下面的代码，

 $(window).load(function(){ queryString(); }); function queryString() { var queryString = window.location.search.substring(1); var varArray = queryString.split("="); //eg. index.html?msg=1 var param1 = varArray[0]; var param2 = varArray[1]; } 

对于所有参数值使用以下代码，

 $(window).load(function(){ queryString(); }); function queryString() { var queryString = window.location.search; var varArray = queryString.split("&"); for (var i=0;i<varArray.length;i++) { var param = varArray[i].split("="); //parameter-value pair } } 

Answer 16

这个问题有太多的答案，所以我增加了另一个。

 /** * parses and returns URI query parameters * * @param {string} param parm * @param {bool?} asArray if true, returns an array instead of a scalar * @returns {Object|Array} */ function getURIParameter(param, asArray) { return document.location.search.substring(1).split('&').reduce(function(p,c) { var parts = c.split('=', 2).map(function(param) { return decodeURIComponent(param); }); if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p; return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1]; }, []); } 

用法：

 getURIParameter("id") // returns the last id or null if not present getURIParameter("id", true) // returns an array of all ids 

这处理了空参数（那些没有"=value"键），暴露了基于标量和基于数组的值检索API，以及正确的URI分量解码。

Answer 17

或者，如果您不想重新创buildURIparsing轮，请使用URI.js

要获取名为foo的参数的值：

 new URI((''+document.location)).search(true).foo 

那是做什么的

1. 将document.location转换为一个string（它是一个对象）
2. 将该string提供给URI.js的URI类构造器
3. 调用search（）函数以获取url的search（查询）部分
   （传递true告诉它输出一个对象）
4. 访问结果对象的foo属性以获取值

这是一个小提琴这个…. http://jsfiddle.net/m6tett01/12/

Answer 18

这是我的解决scheme。 正如Andy E在回答这个问题的时候所build议的那样，如果它重复构build各种正则expression式string，运行循环等来获得单个值，那么对于脚本的性能来说就不是那么好。 所以，我想出了一个简单的脚本，它返回一个对象中的所有参数。 您可以只调用一次，将结果赋值给一个variables，并使用适当的键获取所需的任何值。 请注意，它也负责URI解码（即像％20之类的东西），并用空格replace+：

  function getUrlParams(url) { var queryString = url.split("?")[1]; var keyValuePairs = queryString.split("&"); var keyValue, params = {}; keyValuePairs.forEach(function(pair) { keyValue = pair.split("="); params[keyValue[0]] = decodeURIComponent(keyValue[1]).replace("+", " "); }); return params } 

所以，这里有两个脚本testing，你可以看到：

 // Tests var currentParams = getUrlParams("example.com/foo?number=zero"); alert(currentParams["number"]); // For the URL you stated above... var someParams = getUrlParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 "); alert(someParams["c"]); // gives "m2-m3-m4-m5"; 

Answer 19

 // Read a page's GET URL variables and return them as an associative array. function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; } // Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false var id = getUrlVars()["locationId"]; 

从这里得到： http : //jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html

Answer 20

在这里我张贴一个例子。 但它是在jQuery中。 希望它能帮助别人：

 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.url.js"></script> <!-- URL: www.example.com/correct/?message=done&year=1990--> <script type="text/javascript"> $(function(){ $.url.attr('protocol') // --> Protocol: "http" $.url.attr('path') // --> host: "www.example.com" $.url.attr('query') // --> path: "/correct/" $.url.attr('message') // --> query: "done" $.url.attr('year') // --> query: "1990" }); </script> 

Answer 21

简单的方法

 function getParams(url){ var regex = /[?&]([^=#]+)=([^&#]*)/g, params = {}, match; while(match = regex.exec(url)) { params[match[1]] = match[2]; } return params; } 

然后调用它像getParams（url）

Answer 22

 // http:localhost:8080/path?param_1=a&param_2=b var getParamsMap = function () { var params = window.location.search.split("&"); var paramsMap = {}; params.forEach(function (p) { var v = p.split("="); paramsMap[v[0]]=decodeURIComponent(v[1]); }); return paramsMap; }; // ----------------------- console.log(getParamsMap()["param_1"]); // should log "a" 

Answer 23

又一个build议。

已经有一些很好的答案，但我发现它们不必要的复杂和难以理解。 这很简单，并返回一个简单的关联数组，其中的键名与URL中的标记名相对应。

我为那些想学习的人添加了一个带有下面评论的版本。

请注意，这依赖jQuery（$ .each）作为循环，我推荐使用forEach。 我发现确保使用jQuery的跨浏览器兼容性更简单，而不是插入单个修补程序来支持旧版浏览器不支持的新function。

编辑：在我写这篇文章之后，我注意到Eric Elliott的答案，尽pipe它使用forEach，但是我通常反对（由于上述原因），这个答案几乎是一样的。

 function getTokens(){ var tokens = []; var query = location.search; query = query.slice(1); query = query.split('&'); $.each(query, function(i,value){ var token = value.split('='); var key = decodeURIComponent(token[0]); var data = decodeURIComponent(token[1]); tokens[key] = data; }); return tokens; } 

评论版本：

 function getTokens(){ var tokens = []; // new array to hold result var query = location.search; // everything from the '?' onward query = query.slice(1); // remove the first character, which will be the '?' query = query.split('&'); // split via each '&', leaving us an array of something=something strings // iterate through each something=something string $.each(query, function(i,value){ // split the something=something string via '=', creating an array containing the token name and data var token = value.split('='); // assign the first array element (the token name) to the 'key' variable var key = decodeURIComponent(token[0]); // assign the second array element (the token data) to the 'data' variable var data = decodeURIComponent(token[1]); tokens[key] = data; // add an associative key/data pair to our result array, with key names being the URI token names }); return tokens; // return the array } 

对于下面的例子，我们将假设这个地址：

 http://www.example.com/page.htm?id=4&name=murray 

您可以将URL标记分配给您自己的variables：

 var tokens = getTokens(); 

然后按照以下名称引用每个URL标记：

 document.write( tokens['id'] ); 

这将打印“4”。

您也可以直接从函数中直接引用一个令牌名称：

 document.write( getTokens()['name'] ); 

这将打印“墨累”。

Answer 24

下面是将url查询参数parsing成Object的angularJs源代码：

 function tryDecodeURIComponent(value) { try { return decodeURIComponent(value); } catch (e) { // Ignore any invalid uri component } } function isDefined(value) {return typeof value !== 'undefined';} function parseKeyValue(keyValue) { keyValue = keyValue.replace(/^\?/, ''); var obj = {}, key_value, key; var iter = (keyValue || "").split('&'); for (var i=0; i<iter.length; i++) { var kValue = iter[i]; if (kValue) { key_value = kValue.replace(/\+/g,'%20').split('='); key = tryDecodeURIComponent(key_value[0]); if (isDefined(key)) { var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true; if (!hasOwnProperty.call(obj, key)) { obj[key] = val; } else if (isArray(obj[key])) { obj[key].push(val); } else { obj[key] = [obj[key],val]; } } } }; return obj; } alert(JSON.stringify(parseKeyValue('?a=1&b=3&c=m2-m3-m4-m5'))); 

Answer 25

我需要读取一个URL GETvariables，并根据url参数完成一个操作。 我search了一个解决scheme的高低，碰到这一小段代码。 它基本上读取当前页面的URL，在URL上执行一些正则expression式，然后将url参数保存在一个关联数组中，我们可以轻松访问它们。

所以作为一个例子，如果我们有以下的JavaScript在底部的位置的url。

 http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July 

所有我们需要做的，以获得参数ID和页面要调用这个：

该守则将是：

 <script type="text/javascript"> var first = getUrlVars()["year"]; var second = getUrlVars()["Month"]; alert(first); alert(second); function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } </script> 

Answer 26

使用URLSearchParams的一个超级简单的方法。

 function getParam(param){ return new URLSearchParams(window.location.search).get(param); } 

目前支持Chrome，Firefox和Safari。

Answer 27

 window.location.href.split("?") 

然后不理会第一个索引

 Array.prototype.slice.call(window.location.href.split("?"), 1) 

返回一个你的url参数的数组

 var paramArray = Array.prototype.slice.call(window.location.href.split(/[?=]+/), 1); var paramObject = paramArray.reduce(function(x, y, i, a){ (i%2==0) ? (x[y] = a[i+1]) : void 0; return x; }, {}); 

有点冗长/哈克，但也function，paramObject包含所有参数映射为一个JS对象

Answer 28

 function getParamValue(param) { var urlParamString = location.search.split(param + "="); if (urlParamString.length <= 1) return ""; else { var tmp = urlParamString[1].split("&"); return tmp[0]; } } 

这应该适用于你的情况，不pipeparam是否是最后一个。

Answer 29

我们可以更简单的方式得到c参数值，而不用循环所有的参数，参见下面的jQuery获取参数。

1.获取参数值：

 var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace('c=',"") 

（要么）

 url.match(**/(c=)[0-z-]+/ig**)[0].replace('c=',"") 

以stringforms返回

“M2-M3-M4-M5”

2.更换参数值：

 var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**) 

Answer 30

你可以添加一个input框，然后让用户把值复制到它里面……这很简单：

 <h1>Hey User! Can you please copy the value out of the location bar where it says like, &m=2? Thanks! And then, if you could...paste it in the box below and click the Done button?</h1> <input type='text' id='the-url-value' /> <input type='button' value='This is the Done button. Click here after you do all that other stuff I wrote.' /> <script> //...read the value on click 

---

好的，尽pipe…我发现这个代码，它似乎工作得很好：

http://www.developerdrive.com/2013/08/turning-the-querystring-into-a-json-object-using-javascript/

 function queryToJSON() { var pairs = location.search.slice(1).split('&'); var result = {}; pairs.forEach(function(pair) { pair = pair.split('='); result[pair[0]] = decodeURIComponent(pair[1] || ''); }); return JSON.parse(JSON.stringify(result)); } var query = queryToJSON();