如何从 GET 参数获取值?

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

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

我需要得到c的整个值。我尝试读取 URL,但是只有m2 。如何使用 JavaScript 执行此操作?

答案

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

我见过的大多数实现都错过了 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 中受支持。有关浏览器支持的列表, 请参见此处

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用于不受支持的浏览器。

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

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

更新 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, {})