如何从 JavaScript [duplicate] 中检索 GET 参数

How to retrieve GET parameters from JavaScript [duplicate]

提问人:compile-fan 提问时间:3/27/2011 最后编辑:Peter Mortensencompile-fan 更新时间:6/11/2022 访问量:699664

问:

考虑:

http://example.com/page.html?returnurl=%2Fadmin

对于内部,它如何检索参数?jspage.htmlGET

对于上面的简单示例,应该是 .func('returnurl')/admin

但它也应该适用于复杂的查询字符串......

javascript 获取

评论

3赞 asleepysamurai 3/27/2011
您可能希望查看对象属性 developer.mozilla.org/en/DOM/window.locationLocation
0赞 Akshay K Nair 10/26/2022
下面是一个将所有参数作为键控对象获取的行:let getParamsObject = ([...(new URLSearchParams(window.location.search))]).reduce((prev,curr)=>(Object.assign(prev,{[curr[0]]:curr[1]})),{})

答:

480赞 Bakudan 3/27/2011 #1

使用 window.location 对象。此代码为您提供不带问号的 GET。

window.location.search.substr(1)

从您的示例中,它将返回returnurl=%2Fadmin

编辑:我冒昧地改变了 Qwerty 的答案,这真的很好,正如他所指出的,我完全按照 OP 的要求进行操作:

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}

我从他的代码中删除了重复的函数执行,将其替换为变量( tmp ),并且我还添加了 decodeURIComponent,完全按照 OP 的要求。我不确定这是否是安全问题。

或者使用普通的 for 循环,即使在 IE8 中也可以工作:

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}

评论

2赞 compile-fan 3/27/2011
它也应该适用于复杂的查询字符串......
1赞 Bakudan 3/27/2011
无论大小如何,它都将返回所有 get 查询,但它将是一个 loooong 字符串。
3赞 Qwerty 6/19/2014
这个答案在问题定义和实现上都是完全错误的。因此,如果您无论如何都要返回整个查询字符串,这不是提问者要求的,您至少应该使用。location.search.substr(1)
1赞 Qwerty 7/3/2014
我喜欢。我也喜欢普通版。改变了我的反对票。无论如何,我之所以建议,还是因为有不必要的阅读和搜索任务?在。forsubstrsubstringslice(1)replace()
1赞 Bakudan 7/3/2014
@Qwerty 我更改为子字符串 - 查询字符串内可能有一个问号(甚至转义 - %3F )
1赞 Gaurav Saxena 3/27/2011 #2

您可以使用位置对象中提供的搜索功能。搜索函数提供 URL 的参数部分。详细信息可以在 Location 对象中找到。

您必须解析生成的字符串以获取变量及其值,例如在“=”上拆分它们。

283赞 weltraumpirat 3/27/2011 #3

window.location.search将返回所有内容?上。下面的代码将删除 ?,使用 split 分隔为键/值数组,然后将命名属性分配给 params 对象:

function getSearchParameters() {
    var prmstr = window.location.search.substr(1);
    return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

var params = getSearchParameters();

然后,您可以通过调用 来获取测试参数。http://myurl.com/?test=1params.test

评论

6赞 Charles Sprayberry 11/16/2012
@Bakudan是处理对象的时候。对于数组,首选 for 循环,请参阅这个问题 for...在 with 数组中for...in
0赞 weltraumpirat 1/12/2014
它伤害不大,但要点。出于这里解释的原因:programmers.stackexchange.com/a/120362,但是,我不会返回,而是空的对象。null{}
0赞 dcoz 1/13/2014
也许你应该把它作为一个函数并插入: if (prmstr == “”) { return null;在第 2 行。否则,如果 URL 中没有“?”,您最终会将“params”设置为 Object {: undefined},这很奇怪。
1赞 dcoz 1/13/2014
@weltraumpirat,我实际上正在编辑我的评论以建议返回 {},但我没有看到您的回复。无论如何,感谢您更新您的代码:)
0赞 Kim Stacks 4/28/2014
我已经调整了您的精彩代码,以允许成为具有 2 个参数的 assoc 数组:q 和 g,其中 g 是具有 2 个值的数组。gist.github.com/simkimsia/11372570?q=abc&g[]=1&g[]=2
43赞 Stefan 7/24/2012 #4

一个更奇特的方法::)

var options = window.location.search.slice(1)
                      .split('&')
                      .reduce(function _reduce (/*Object*/ a, /*String*/ b) {
                        b = b.split('=');
                        a[b[0]] = decodeURIComponent(b[1]);
                        return a;
                      }, {});

评论

10赞 fe_lix_ 11/27/2012
确实很花哨,但要注意 reduce 并非与所有浏览器兼容。更多信息在这里 : stackoverflow.com/questions/7094935/ie-js-reduce-on-an-object
0赞 Ian Clark 1/4/2014
值得注意的是,IE8 不支持它
0赞 Qwerty 11/14/2014
如果有一个 url 作为参数,decodeURIComponent 会错误地将其解析为另一个 &key=val 对。
0赞 Peter T. 8/18/2016
正如 Qwerty 所指出的:decodeURIComponent 应该移到里面:a[b[0]] = decodeURIComponent(b[1])
0赞 Oliver Schimmer 12/21/2022
谢谢,我非常喜欢这个 - 如果 IE 没有死,IE8 肯定是。我要改进的是多次处理空参数(没有零件)和相同的参数(也许使用列表)。而且使用代替 .=valueObject.create(null){}
160赞 Qwerty 1/19/2014 #5

TL的;dr 解决方案,使用香草 JavaScript 在单行代码上

var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

这是最简单的解决方案。不幸的是,它处理多值键和编码字符。

"?a=1&a=%2Fadmin&b=2&c=3&d&e"
> queryDict
a: "%2Fadmin"  // Overridden with the last value, not decoded.
b: "2"
c: "3"
d: undefined
e: undefined

多值键编码字符

请参阅如何在 JavaScript 中获取查询字符串值?中的原始答案。

"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab&a=%2Fadmin"
> queryDict
a: ["1", "5", "t e x t", "/admin"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

在您的示例中,您将访问如下所示的值:

"?returnurl=%2Fadmin"
> qd.returnurl    // ["/admin"]
> qd['returnurl'] // ["/admin"]
> qd.returnurl[0] // "/admin"

评论

4赞 Naveed Hasan 1/29/2014
似乎是这里最好的答案。
1赞 Bakudan 7/2/2014
感谢您注意到我的错误。我还冒昧地修改了您的代码,删除了第二个拆分调用,该调用可以替换为局部变量。
0赞 Phuong 2/2/2016
简短易懂:)
0赞 gumuruh 7/26/2016
什么是香草?注入了另一个 JS?@NaveedHasan
1赞 Qwerty 7/26/2016
@NaveedHasan VanillaJS 是一个术语,起源于没有额外库的纯 javascript 的笑话名称。请看这里。
1赞 gtramontina 6/12/2014 #6

我的解决方案扩展了@tak3r。

当没有查询参数时,它返回一个空对象,并支持数组表示法:?a=1&a=2&a=3

function getQueryParams () {
  function identity (e) { return e; }
  function toKeyValue (params, param) {
    var keyValue = param.split('=');
    var key = keyValue[0], value = keyValue[1];

    params[key] = params[key]?[value].concat(params[key]):value;
    return params;
  }
  return decodeURIComponent(window.location.search).
    replace(/^\?/, '').split('&').
    filter(identity).
    reduce(toKeyValue, {});
}

评论

0赞 Peter Mortensen 10/9/2020
目前没有任何用户名为“tak3r”的答案或评论(用户名可以随时更改)。它指的是什么?
13赞 lsblsb 11/18/2014 #7

我这样做(要检索特定的get参数,这里是'parameterName'):

var parameterValue = decodeURIComponent(window.location.search.match(/(\?|&)parameterName\=([^&]*)/)[2]);

评论

0赞 Michael Yagudaev 1/17/2016
这很好,很短。我也更喜欢在我的代码中这样做。
0赞 rinogo 2/5/2016
这很好并且有效,但是当省略参数时会产生错误......您可以通过将匹配项存储在变量中并检查它是否相等来修复它,但这会破坏单行性质:/null
2赞 thSoft 11/28/2014 #8

如果您不介意使用库而不是滚动自己的实现,请查看 https://github.com/jgallen23/querystring

3赞 Jonas Sciangula Street 4/14/2015 #9
var getQueryParam = function(param) {
    var found;
    window.location.search.substr(1).split("&").forEach(function(item) {
        if (param ==  item.split("=")[0]) {
            found = item.split("=")[1];
        }
    });
    return found;
};
2赞 Jonah 8/14/2015 #10

此解决方案处理 URL 解码:

var params = function() {
    function urldecode(str) {
        return decodeURIComponent((str+'').replace(/\+/g, '%20'));
    }

    function transformToAssocArray( prmstr ) {
        var params = {};
        var prmarr = prmstr.split("&");
        for ( var i = 0; i < prmarr.length; i++) {
            var tmparr = prmarr[i].split("=");
            params[tmparr[0]] = urldecode(tmparr[1]);
        }
        return params;
    }

    var prmstr = window.location.search.substr(1);
    return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}();

用法:

console.log('someParam GET value is', params['someParam']);
-1赞 vusan 11/16/2015 #11

如果你使用的是 AngularJS,你可以使用 using module$routeParamsngRoute

您必须向应用添加模块

angular.module('myApp', ['ngRoute'])

现在您可以使用服务:$routeParams

.controller('AppCtrl', function($routeParams) {
  console.log($routeParams); // JSON object
}
20赞 Ali 2/16/2016 #12

这个使用正则表达式,如果参数不存在或没有任何值,则返回 null:

function getQuery(q) {
   return (window.location.search.match(new RegExp('[?&]' + q + '=([^&]+)')) || [, null])[1];
}

评论

0赞 taggartJ 8/22/2019
是的,谢谢,这就是我需要的:)
0赞 Ivan 4/18/2020
完美地完成工作。谢谢!
0赞 Williams 1/14/2021
完美的代码,谢谢!
0赞 mdikici 4/23/2021
工作完美,非常小的代码部分。 谢谢。
0赞 Akshay K Nair 12/16/2021
哇,不错。.
6赞 Randhir Rawatlal 4/18/2016 #13

若要将参数作为 JSON 对象获取,请执行以下操作:

console.log(getUrlParameters())

function getUrlParameters() {
    var out = {};
    var str = window.location.search.replace("?", "");
    var subs = str.split(`&`).map((si)=>{var keyVal = si.split(`=`); out[keyVal[0]]=keyVal[1];});
    return out
}

评论

1赞 moosearch 5/7/2022
应该注意的是,它仅适用于Firefox。将第一行替换为object.toSource()alert(JSON.stringify(getUrlParameters()))
4赞 Chandrashekar 6/12/2016 #14

我创建了一个简单的 JavaScript 函数来从 URL 访问 GET 参数。

只需包含此 JavaScript 源代码,您就可以访问参数。 例如:在 http://example.com/index.php?language=french 中,变量可以作为 访问。同样,所有参数的列表将作为数组存储在变量中。JavaScript 和 HTML 都在以下代码片段中提供:getlanguage$_GET["language"]$_GET_Params

<!DOCTYPE html>
<html>
  <body>
    <!-- This script is required -->
    <script>
    function $_GET() {
      // Get the Full href of the page e.g. http://www.google.com/files/script.php?v=1.8.7&country=india
      var href = window.location.href;

      // Get the protocol e.g. http
      var protocol = window.location.protocol + "//";

      // Get the host name e.g. www.google.com
      var hostname = window.location.hostname;

      // Get the pathname e.g. /files/script.php
      var pathname = window.location.pathname;

      // Remove protocol part
      var queries = href.replace(protocol, '');

      // Remove host part
      queries = queries.replace(hostname, '');

      // Remove pathname part
      queries = queries.replace(pathname, '');

      // Presently, what is left in the variable queries is : ?v=1.8.7&country=india

      // Perform query functions if present
      if (queries != "" && queries != "?") {

    // Remove question mark '?'
        queries = queries.slice(1);

        // Split all the different queries
        queries = queries.split("&");

        // Get the number of queries
        var length = queries.length;

        // Declare global variables to store keys and elements
        $_GET_Params = new Array();
        $_GET = {};

        // Perform functions per query
        for (var i  = 0; i < length; i++) {

          // Get the present query
          var key = queries[i];

          // Split the query and the value
          key = key.split("=");

          // Assign value to the $_GET variable
          $_GET[key[0]] = [key[1]];

          // Assign value to the $_GET_Params variable
          $_GET_Params[i] = key[0];
        }
      }
    }

    // Execute the function
    $_GET();
    </script>
    <h1>GET Parameters</h1>
    <h2>Try to insert some get parameter and access it through JavaScript</h2>
  </body>
</html>

9赞 Lucas Serena 7/27/2016 #15

在这里,我制作了此代码,将 GET 参数转换为对象,以便更轻松地使用它们。

// Get Nav URL
function getNavUrl() {
    // Get URL
    return window.location.search.replace("?", "");
};

function getParameters(url) {
    // Params obj
    var params = {};
    // To lowercase
    url = url.toLowerCase();
    // To array
    url = url.split('&');

    // Iterate over URL parameters array
    var length = url.length;
    for(var i=0; i<length; i++) {
        // Create prop
        var prop = url[i].slice(0, url[i].search('='));
        // Create Val
        var value = url[i].slice(url[i].search('=')).replace('=', '');
        // Params New Attr
        params[prop] = value;
    }
    return params;
};

// Call of getParameters
console.log(getParameters(getNavUrl()));
170赞 AKnox 9/21/2016 #16

您应该使用 URL 和 URLSearchParams 本机函数:

let url = new URL("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string")
let params = new URLSearchParams(url.search);
let sourceid = params.get('sourceid') // 'chrome-instant'
let q = params.get('q') // 'mdn query string'
let ie = params.has('ie') // true
params.append('ping','pong')

console.log(sourceid)
console.log(q)
console.log(ie)
console.log(params.toString())
console.log(params.get("ping"))

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://polyfill.io/v2/docs/features/

评论

9赞 Cyril Duchon-Doris 3/16/2017
不幸的是,这与 IE 不兼容 :'(
10赞 AKnox 3/31/2017
添加代码片段下方列出的 polyfill 来修补 IE,并将其倒置。
8赞 Raphaël Gonçalves 3/20/2018
@Alexey >,因为它应该是那样的var params = new URLSearchParams(window.location.search.slice(1));
2赞 Xeoncross 10/4/2018
这在iOS Safari上不起作用,因为iOS Safari的市场份额比IE大得多。
4赞 Alexey Khachatryan 3/27/2020
这是最有力的答案,无需使用发明的函数和大量代码
3赞 E Net Arch 12/1/2016 #17

这是另一个基于 Kat 和 Bakudan 示例的示例,但使其更加通用。

function getParams ()
{
    var result = {};
    var tmp = [];

    location.search
        .substr (1)
        .split ("&")
        .forEach (function (item)
        {
            tmp = item.split ("=");
            result [tmp[0]] = decodeURIComponent (tmp[1]);
        });

    return result;
}

location.getParams = getParams;

console.log (location.getParams());
console.log (location.getParams()["returnurl"]);

评论

0赞 Peter Mortensen 10/9/2020
用户名“Kat”没有答案或评论。用户名可以随时更改。它指的是什么?