是否有一种通过jQuery(或不使用)检索查询字符串值的无插件方法?

如果是,怎么办?如果没有,是否有插件可以这样做?


当前回答

非常轻量级的jQuery方法:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

例如,提醒?q

alert(request.q)

其他回答

我需要查询字符串中的一个对象,我讨厌很多代码。它可能不是世界上最健壮的,但它只是几行代码。

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

像这样的URL.htm?hello=world&foo=bar将创建:

{hello:'world', foo:'bar'}

这将从URL字符串中解析变量AND数组。它既不使用正则表达式,也不使用任何外部库。

function url2json(url) {
   var obj={};
   function arr_vals(arr){
      if (arr.indexOf(',') > 1){
         var vals = arr.slice(1, -1).split(',');
         var arr = [];
         for (var i = 0; i < vals.length; i++)
            arr[i]=vals[i];
         return arr;
      }
      else
         return arr.slice(1, -1);
   }
   function eval_var(avar){
      if (!avar[1])
          obj[avar[0]] = '';
      else
      if (avar[1].indexOf('[') == 0)
         obj[avar[0]] = arr_vals(avar[1]);
      else
         obj[avar[0]] = avar[1];
   }
   if (url.indexOf('?') > -1){
      var params = url.split('?')[1];
      if(params.indexOf('&') > 2){
         var vars = params.split('&');
         for (var i in vars)
            eval_var(vars[i].split('='));
      }
      else
         eval_var(params.split('='));
   }
   return obj;
}

例子:

var url = "http://www.x.com?luckyNums=[31,21,6]&name=John&favFoods=[pizza]&noVal"
console.log(url2json(url));

输出:

[object]
   noVal: ""
   favFoods: "pizza"
   name:     "John"
   luckyNums:
      0: "31"
      1: "21"
      2: "6"

我在这里做了一个小的URL库来满足我的需求:https://github.com/Mikhus/jsurl

这是一种在JavaScript中操纵URL的更常见的方法。同时,它非常轻量级(缩小和gzip<1KB),并且具有非常简单和干净的API。而且它不需要任何其他库来工作。

关于最初的问题,很简单:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:pass@example.com:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);

如果您使用Browserify,则可以使用Node.js中的url模块:

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns { "bob": "123" }

进一步阅读:URL Node.js v0.12.2手册和文档

编辑:您可以使用URL界面,它在几乎所有新浏览器中都被广泛采用,如果代码将在旧浏览器上运行,您可以使用像这样的polyfill。下面是一个关于如何使用URL接口获取查询参数(也称为搜索参数)的代码示例

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob'); 

您也可以使用URLSearchParams进行搜索,下面是MDN的一个使用URLSearchParams进行搜索的示例:

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

我们刚刚发布了arg.js,这是一个旨在一劳永逸地解决这个问题的项目。传统上很难,但现在你可以做到:

var name = Arg.get("name");

或者得到全部:

var params = Arg.all();

如果你在乎两者之间的区别?query=true和#hash=true,则可以使用Arg.query()和Arg.hash()方法。