如何从GET参数中获取值？

我见过的大多数实现都错过了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);

资源

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

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

示例网址:

    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充满参数,它也能正常工作.

浏览器供应商已经通过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.有关浏览器支持的列表,请参阅此处.

自由软件开发人员网站 htt

https://url.spec.whatwg.org/

Google的工程师Eric Bidelman 建议将此polyfill用于不受支持的浏览器.

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

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

然后像这样称呼它:

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

您可以获取查询字符串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;

我写了一个更简单优雅的解决方案.

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

这是一个递归解决方案,没有正则表达式,并且具有最小的突变(只有params对象被突变,我认为这在JS中是不可避免的).

它真棒,因为它:

是递归的

处理同名的多个参数

很好地处理格式错误的参数字符串(缺少值,等等)

如果'='在值中,则不会中断

执行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'];

我做了一个功能:

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实现(运行babel预设阶段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)), {});

一些测试:

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 {}

更新3/26/2018,这是一个Typescript实现:

const getUrlParams = (search: string) => `${search}?`
  .split('?')[1]
  .split('&')
  .reduce(
    (params: object, pair: string) => {
      const [key, value] = `${pair}=`
        .split('=')
        .map(decodeURIComponent)

      return key.length > 0 ? { ...params, [key]: value } : params
    },
    {}
  )

更新2/13/2019,这是一个更新的TypeScript实现,适用于TypeScript 3.

interface IParams { [key: string]: string }

const paramReducer = (params: IParams, pair: string): IParams => {
  const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)

  return key.length > 0 ? { ...params, [key]: value } : params
}

const getUrlParams = (search: string): IParams =>
  `${search}?`.split('?')[1].split('&').reduce(paramReducer, {})

看到这个

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

        

12> spencer.sm..：
使用URLSearchParams的一种超级简单的方法.

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


它目前支持Chrome,Firefox,Safari,Edge 等.

        

13> veiset..：
ECMAScript 6解决方案:

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

        

14> Chris Dutrow..：
我使用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'

        

15> Fancyoung..：
我用

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

        

16> Maviza101..：
这是我的解决方案.正如Andy E在回答这个问题时所建议的那样,如果你的脚本重复构建各种正则表达式字符串,运行循环等只是为了获得单个值,那么它对你的脚本的性能并不好.所以,我想出了一个更简单的脚本,它返回单个对象中的所有GET参数.您应该只调用一次,将结果分配给变量,然后在将来的任何时候,使用适当的密钥从该变量中获取所需的任何值.请注意,它还会处理URI解码(例如%20之类的内容)并用空格替换+:

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


所以,这里有一些脚本测试供您查看:

// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".

// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".

// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".

        

17> Ravi Patel..：
对于单个参数值,如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

        

18> Tyson..：
这个问题的答案太多了,所以我又补充了一个.

/**
 * 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组件解码.

        

19> Gus..：
或者,如果您不想重新发明URI解析轮,请使用URI.js

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

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


那是做什么的 


将document.location转换为字符串(它是一个对象) 
将该字符串提供给URI.js的URI类construtor
调用search()函数来获取url的搜索(查询)部分

(传递true告诉它输出一个对象)
访问结果对象上的foo属性以获取值


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

        

20> Sariban D'Cl..：
这里我发布一个例子.但它在jQuery中.希望它能帮助别人:








        

21> Zon..：
最短的方法：

new URL(location.href).searchParams.get("my_key");

        
我更喜欢使用`new URL（location.href）.searchParams.get（“ my_key”）`而非`URLSearchParams`，因为后者在检索任何URL的第一个查询参数时将失败。 

22> thezar..：
// 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

        

23> 小智..：
简单的方法

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


然后像getParams(url)一样调用它

        

24> equazcion..：
还有一个建议. 

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

我为想要学习的人添加了一个带有评论的版本.

请注意,这依赖于jQuery($ .each)的循环,我建议使用它而不是forEach.我发现使用jQuery确保跨浏览器兼容性更简单,而不是插入单独的修补程序来支持旧版浏览器中不支持的新功能.

编辑:在我写完这篇文章之后,我注意到埃里克·艾略特的答案,几乎是相同的,尽管它使用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标记分配给您自己的变量:

var tokens = getTokens();


然后按名称引用每个URL标记,如下所示:

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


这将打印"4".

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

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


...将打印"默里".

        

25> 小智..：
// http:localhost:8080/path?param_1=a¶m_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"     

        

26> simhumileco..：
最简单的方法使用replace()方法：

从urlStr字符串：

paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');


或从当前网址：

paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');


说明：


document.URL -接口以字符串形式返回文档位置（页面url）。
replace()-方法返回一个新字符串，该字符串的某些或所有模式匹配都被替换替换。
/.*param_name=([^&]*).*/- 包含在斜杠之间的正则表达式模式，这意味着：


.* -零个或多个字符，
param_name= -带有名字的参数名称，
() -以正则表达式分组
[^&]*-除以下字符之外的任何一个或多个字符&，
| -交替
$1 -在正则表达式中引用第一组。





paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');