如何从GET参数获取值?


1326

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

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

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


在发布新答案之前,请考虑该问题已经有50多个答案。请确保您的答案提供的信息不属于现有答案。
janniks

Answers:


1996

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

在(现代)浏览器中运行的代码可以使用URL对象(它是浏览器提供给JS的API的一部分):

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

对于较旧的浏览器,除了可能需要一个polyfillURLURLSearchParams。或者,您也可以通过将var c = url.searchParams.get("c");上面答案中的行替换为来回避此问题var c = new URLSearchParams(window.location.search).get("c");
evanrmurphy

对于包含“ =”的值,parse_query_string将失败,例如,将base64编码的值作为值传递时。下面使用常规表达式的版本效果更好。
Manel Clos

7
@Jamland —绝对不要这样做。它会破坏事情。这是一个现场演示, new URL()希望收到一个正确编码的URL作为其参数。decodeURIComponent希望传递一个组件的URL,而不是整个URL的。
昆汀

@Quentin我检查了不同的特殊字符,我看你是对的。decodeURIComponent在这种情况下不应该使用
Jamland

1
parse_query_string函数对进行双解码value。在=通过@ManelClos发出提到可以通过添加第二参数来解决2limit)到vars[i].split()
杰克

242

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

3
此代码无效。它会创建一个无限循环,因为正则表达式是在循环定义中编译的,该定义会重置当前索引。如果将正则表达式放入循环外部的变量中,它将正常工作。
maxhawkins

2
@maxhawkins:它可以在某些浏览器中工作,而在其他浏览器中则会陷入无限循环。在这方面,你是正确的。我将代码固定为跨浏览器。感谢您指出了这一点!
Ates Goral

3
@ZiTAL此函数将与URL的查询部分一起使用,而不是与整个URL一起使用。请参阅下面的注释掉的用法示例。
Ates Goral 2012年

1
@Harvey不区分大小写与查询参数无关。听起来像是特定于应用程序的事情,应该与查询参数提取一起或在查询参数提取之上应用。
Ates Goral,2016年

7
为什么qs.split('+').join(' ');qs.replace(/\+/g, ' ');呢?
FlameStorm

234

资源

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

8
我最喜欢此选项,但更喜欢返回null或结果,但不返回空字符串。
杰森·塔瑟

1
看来您还有一些额外的转义字符。“\\[“ 应该 ”\[”。由于这些是常规字符串,因此[和]不需要转义。
EricP

这不区分大小写。我应该在哪里添加“ i”以使其不区分大小写?
zeta

alert(gup('UserID',window.location.href));
阿伦·普拉萨德

6
@mottie无效链接
调用

202

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

范例网址:

    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充满了参数,它也可以正常工作。


36
仅当您要获取的参数是URL中的最后一个参数(您不应该依赖该参数)(即使您仅期望一个参数)时,此方法才有效。例如,http://myserver/action?myParam=2&anotherParam=3将产生不"2"但是"2&anotherParam=3"
Glacials 2014年

39
(location.search.split('myParam=')[1]||'').split('&')[0]-与多个参数一起使用或可能丢失 myParam
的Gabor伊姆雷

location.search.split('myParam=').splice(1).join('').split('&')[0]
J.Steve

1
你可以得到更精确,并允许任何参数顺序与前面加上[?|&][?|&]myParam=([^&]+)
1.21亿千瓦

1
您可能需要解码该值result = decodeURIComponent(result);
1.21吉瓦

126

浏览器供应商已通过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/zh-CN/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

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

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


根据MDN链接,Safari支持URL,但不支持URLSearchParams。
Mark Thomson

3
@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 '17

更新的答案。我的原始答案未正确使用URLSearchParams,因为它仅设计用于URL的querystring部分。
cgatian

1
使用url.searchParams代替new URLSearchParams(url.search)
塔奥发(Taifa),2017年

86

我很久以前就发现这很简单:

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

然后这样称呼它:

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

7
+1出色的解决方案-优雅,高效和智能是使用条款。就我的目的而言,比其他公认的解决方案还要好
2015年

简短+简单+强大=很棒
mzy 2015年

1
很好,它也可以使用location.search而不是window.location.href进行工作
Fabio

1
@pdxbmw它是无用的,应该删除。乍一看,该代码似乎很聪明,但考虑得还不够好。改进:利用decodeURIComponent()价值,因为这是您通常要使用的东西;请使用window.location.search而不是window.location.href,因为您只对参数感兴趣,而不对整个网址感兴趣。
雷夫

2
@Leif的建议效果很好。我进入ID 142#是因为URL的末尾是单击按钮时生成的#。留下这样的功能var vars = {}; window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars;
Andres Ramos

77

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

3
URL解码参数名称和值怎么办?
Ates Goral

这种方法不处理数组。例如?array[]=1&array[]=2产生{"array[]": "2"},这显然是错误的。
卡夫索

@Kafoso这里没有明确的对与错。首先,具有相同名称的重复字段没有指定的标准行为,并且由解析器处理。此外,该[]模式在某些情况下(例如PHP)仅具有含义,而在其他情况下则没有意义。因此,不要“明显错误”-只是没有实现您可能需要或可能不需要处理的非标准案例。
Blixt

38

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

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

看看那两行,完全按照其提示说了什么,而且如果有人尝试探查漏洞并添加很多额外的字符和查询(与其中的几种解决方案不同),它也不会中断。干杯!
David G

这样可以正确完成工作,并且仅两行。好答案!
安德烈·拉莫斯

我认为对其他包含null的检查会很方便。如果不是,请参见以下示例:stackoverflow.com/a/36076822/1945948(我的编辑尝试被拒绝)。
ATW

不明白...这如何回答有关从特定字符串'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5'获取参数的问题?
麦克啮齿动物

喜欢这个答案,已+1。只是一个建议,你可以更换[0-9] \d
gmanjon

31

使用URLSearchParams的超级简单方法。

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

目前在Chrome,Firefox,Safari,Edge和其他版本中受支持。


在Edge中运行时,收到错误:“ SCRIPT5009:未定义URLSearchParams”。
安德烈亚斯·普雷斯特哈默

@AndreasPresthammer边缘的什么版本?
spencer.sm

@ spencer-sm Microsoft Edge 41.16299.820.0
Andreas Presthammer

不适用于
美化的

@ iiiml0sto1什么是“修饰的URL参数”?
spencer.sm

30

这是一个没有正则表达式并且具有最小变异的递归解决方案(仅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'];

31
你...你说了两次递归。
异议人士愤怒

它无法在下一个网址中找到第一个参数:www.mysite.com?
first=1&second=2

嗨,马里奥,这是一个JSFiddle,显示了它与该URL的配合使用:jsfiddle.net/q6xfJ-如果发现错误,这可能是特定于浏览器的吗?测试时,请注意,我提供的答案使用location.search,这是URL的“?first = 1&second = 2”部分。干杯:)
2014年

45
我不明白为什么仅仅因为它是递归的东西才是好东西。
亚当·阿罗德

6
Erm,我想您错过了Adam的递归笑话。尽管现在每个人都会错过它,因为edi9999删除了第二个“ Is递归”。
2015年

27

我做了一个做到这一点的功能:

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

更新2018年3月26日,这是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 3一起使用的更新的TypeScript实现。

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<IParams>(paramReducer, {})

在没有查询参数的URL上,它将返回Object {"": ""}
Ilya Semenov

2
对我来说看起来很干净。没有足够的解释,其余答案太“神奇”了。
列维·罗伯茨

这是一个了不起的答案!
Spencer Bigum

谢谢@SpencerBigum!
内特·费雷罗

24

看到这个

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";
    }
}

1
谢谢。我是jscript的新手,这将非常有帮助。
Brian B.

20

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

真好 仅供参考,因为它是Map,用法是params.get(“ key”);
evanmcd '19

我喜欢它,但可能不会获得第一个参数。我根据您的示例创建了一个函数 function urlParams(url) { const [, searchParams = ''] = url.split('?') return searchParams.split('&') .map(v => v.split('=')) .reduce((map, [key = '', value]) => key.length ? map.set(key, decodeURIComponent(value)) : map, new Map()) }
mah.cr,2016年

11

我用

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

请添加一些说明。您的答案目前被标记为“质量低下”,最终可能会被删除。
Johannes Jander

我发现,如果在网址末尾有一个字符串,例如“ #id”,并返回最后一个参数值,例如“ somevalue#id”
Ayano,2016年

@Ayano window.location.search将不包含hash like #id
Fancyoung

@Fancyoung是的,您是对的,我犯了一个错误,该错误location.href用于匹配结果而不是location.search.Thank you。
Ayano

11

我使用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'

9

这是我的解决方案。正如Andy E在回答此问题时所建议的那样,如果脚本重复构建各种regex字符串,运行循环等只是为了获得单个值,则对脚本的性能不利。因此,我想出了一个更简单的脚本,该脚本在单个对象中返回所有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".

.replace(“ +”,“”)仅替换第一次出现的情况。您需要使用.replace(/ \ + / g,“”);
托尼

8

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

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

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

那是什么

  1. 将document.location转换为字符串(是一个对象)
  2. 将该字符串提供给URI.js的URI类构造函数
  3. 调用search()函数以获取URL的搜索(查询)部分
    (传递true指示其输出对象)
  4. 访问结果对象的foo属性以获取值

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


8

对于像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
    }
} 

1
我喜欢这个解决方案!
alemur 2015年

8

我在这里发布一个例子。但这是在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>

1
从另一篇文章中复制:“需要url插件:plugins.jquery.com/url”
zeta

8

最短的方法:

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

2
我倾向于使用new URL(location.href).searchParams.get("my_key")over,URLSearchParams因为后者在检索任何URL的第一个查询参数时将失败。
特拉维斯·克拉克

1
测试了两个变体。我同意你的看法。编辑答案。
Zon

7

这个问题有太多答案,所以我要再添加一个。

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


7

使用的最简单方法 replace()方法:

urlStr字符串:

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

从当前网址

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

说明:

  • document.URL -接口以字符串形式返回文档位置(页面url)。
  • replace()-方法返回一个新字符串,该字符串具有部分或全部模式匹配项,并由替换项替换
  • /.*param_name=([^&]*).*/- 正则表达式包含在斜杠之间模式,这意味着:
    • .* -零个或多个字符,
    • param_name= -带有名字的参数名称,
    • () -以正则表达式分组
    • [^&]* -任何一个或多个字符,但不包括 &
    • | -交替
    • $1 -在正则表达式中引用第一组。

var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');
console.log(`c === '${c}'`);
console.log(`notExisted === '${notExisted}'`);


1
好的解决方案,但是如果找不到该参数,则返回整个字符串。我希望在这种情况下为“未定义”。
pensan

1
嗨@pensan,谢谢您的好评。我只是将参数未出现在URL中的情况添加到正则表达式中。在这种情况下,我们得到了空字符串(不是整个字符串)。
simhumileco

6

另一个建议。

已经有一些好的答案,但是我发现它们不必要地复杂且难以理解。它简短,简单,并且返回一个简单的关联数组,其键名与URL中的令牌名称相对应。

我在下面为想要学习的人添加了一个带有注释的版本。

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

编辑:写完这篇文章后,我注意到埃里克·埃利奥特(Eric Elliott)的回答,尽管它使用了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'] );

...将打印“墨累”。


6
// 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


6

简单的方法

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

然后像getParams(url)这样称呼它


5

我需要读取URL GET变量并完成基于url参数的操作。我在高处寻找解决方案,并遇到了这段小代码。它基本上会读取当前页面的url,在URL上执行一些正则表达式,然后将url参数保存在一个关联数组中,我们可以方便地访问它。

因此,举个例子,如果我们在U​​RL的底部放置了以下URL。

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

我们需要获取参数id和page的所有操作就是调用此方法:

该守则将是:

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

为我工作谢谢
OJB1

5
// 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"     

这将返回带有“?”的第一个参数。
Pini Cheyni '17

5

Eldon McGuinness撰写的 Gist是迄今为止我所见过的最完整的JavaScript查询字符串解析器实现。

不幸的是,它是作为jQuery插件编写的。

我将其重写为Vanilla JS,并进行了一些改进:

function parseQuery(str) {
  var qso = {};
  var qs = (str || document.location.search);
  // Check for an empty querystring
  if (qs == "") {
    return qso;
  }
  // Normalize the querystring
  qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
  while (qs.indexOf("&&") != -1) {
    qs = qs.replace(/&&/g, '&');
  }
  qs = qs.replace(/([\&]+$)/, '');
  // Break the querystring into parts
  qs = qs.split("&");
  // Build the querystring object
  for (var i = 0; i < qs.length; i++) {
    var qi = qs[i].split("=");
    qi = qi.map(function(n) {
      return decodeURIComponent(n)
    });
    if (typeof qi[1] === "undefined") {
      qi[1] = null;
    }
    if (typeof qso[qi[0]] !== "undefined") {

      // If a key already exists then make this an object
      if (typeof (qso[qi[0]]) == "string") {
        var temp = qso[qi[0]];
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]] = [];
        qso[qi[0]].push(temp);
        qso[qi[0]].push(qi[1]);

      } else if (typeof (qso[qi[0]]) == "object") {
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]].push(qi[1]);
      }
    } else {
      // If no key exists just set it as a string
      if (qi[1] == "") {
        qi[1] = null;
      }
      qso[qi[0]] = qi[1];
    }
  }
  return qso;
}

// DEMO
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));

另请参见此Fiddle


我不了解javascript的原因是为什么它们没有制作url解析函数并将其放入语言本身或至少在标准库中?低级的东西,这不应该一遍又一遍地改头换面,也不应该让开发人员使用他们会产生的任何熵变解决方案。如果这是可靠的,则应将此类内容放入标准库中。这是javascript中事物类型的一个示例,使我无法使用该语言。
ahnbizcad '18年

5

优雅,实用的风格解决方案

让我们创建一个包含URL参数名称作为键的对象,然后可以通过其名称轻松提取参数:

// URL: https://example.com/?test=true&orderId=9381  

// Build an object containing key-value pairs
export const queryStringParams = window.location.search
  .split('?')[1]
  .split('&')
  .map(keyValue => keyValue.split('='))
  .reduce<QueryStringParams>((params, [key, value]) => {
    params[key] = value;
    return params;
  }, {});

type QueryStringParams = {
  [key: string]: string;
};


// Return URL parameter called "orderId"
return queryStringParams.orderId;

很喜欢这个,但是在没有确保在reduce函数中返回累加器的情况下对我不起作用
Ella

@Ella这是一个错字,没有它就无法工作return

现在看起来更好,希望您能进入首页!
艾拉

4

这是我的工作:

var uriParams = getSearchParameters();
alert(uriParams.c);


// background functions:

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.