从“GET”参数（JavaScript）中获取值[重复]

JavaScript 本身没有内置任何东西来处理查询字符串参数。

在（现代）浏览器中运行的代码可以使用 URL object（它是浏览器向 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");控制台.log(c);

对于较旧的浏览器（包括 Internet Explorer），您可以使用 this polyfill。

您还可以使用早于 URL 的此答案的原始版本中的代码。上面的 polyfill 是健壮的并且经过了很好的测试，不过我强烈推荐它。

您可以访问 location.search，这将使您从 ? 字符到 URL 的末尾或片段标识符 (#foo) 的开头，以先到者为准。

然后你可以用这个来解析它：

函数 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.shift()); var value = decodeURIComponent(pair.join("=")); // 如果第一个条目具有此名称 if (typeof query_string[key] === "undefined") { query_string[key] = value; // 如果第二个条目同名 } else if (typeof query_string[key] === "string") { var arr = [query_string[key], value];查询字符串[键] = arr； // 如果第三个或以后的条目具有此名称 } else { query_string[key].push(value); } } 返回查询字符串； } 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);

---

我见过的大多数实现都错过了对名称和值进行 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);

---

source

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。浏览器支持列表 see here。

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 recommends将此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;

---

使用 URLSearchParams 的超级简单方法。

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

Chrome、Firefox、Safari、Edge 和 others 目前支持它。

---

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

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

2017 年 5 月 26 日更新，这是一个 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
    },
    {}
  )

2019 年 2 月 13 日更新，这是一个更新的 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<IParams>(paramReducer, {})

---

See this

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

---

最短的方法：

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

---

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

---

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

---

我用

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

---

这个问题的答案太多了，所以我再添加一个。

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

---

这是我的解决方案。正如 Andy E 在回答 this question 时所建议的那样，如果它反复构建各种正则表达式字符串、运行循环等只是为了获得一个值，这对您的脚本的性能不利。所以，我想出了一个更简单的脚本，它在单个对象中返回所有 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() 方法的最简单方法：

来自 urlStr 字符串：

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

或从当前 URL：

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

解释：

document.URL - 接口以字符串形式返回文档位置（页面 url）。

replace() - 方法返回一个新字符串，其中模式的部分或全部匹配被替换替换。

/.*param_name=([^&]*).*/ - 包含在斜杠之间的正则表达式模式，这意味着：.* - 零个或多个任何字符，param_name= - 被搜索的参数名称，() - 分组正则表达式，[^&]* - 一个或多个除 &、| 之外的任意字符- 交替，$1 - 引用正则表达式中的第一组。

.* - 零个或多个任意字符，

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}'`);

---

还有一个建议。

已经有一些很好的答案，但我发现它们不必要地复杂且难以理解。这是简短的，简单的，并返回一个简单的关联数组，其中键名对应于 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'] );

...这将打印“默里”。

---

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

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

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

那是什么

将 document.location 转换为字符串（它是一个对象）将该字符串提供给 URI.js 的 URI 类构造函数调用 search() 函数以获取 url 的搜索（查询）部分（传递 true 告诉它输出一个对象）访问结果对象上的 foo 属性以获取值

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

---

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

---

在这里，我发布一个示例。但它在 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>

---

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

---

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

例如，如果我们有以下 url，底部有 javascript。

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>

---

简单的方法

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

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

---

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

让我们创建一个包含 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;

---

这是我正在寻找一种干净的方法来做到这一点的 N++ 时间。会保存在这里以防万一我回来因为我知道我会...🙄

const parseUrlQuery = (value) => { var urlParams = new URL(value).searchParams return Array.from(urlParams.keys()).reduce((acc, key) => { acc[key] = urlParams.getAll( key) 返回 acc }, {}) } console.log(parseUrlQuery('http://url/path?param1=A¶m1=B¶m2=ABC¶m3=61569'))

---

这是我所做的：

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

---

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

---