使用jQuery获取查询字符串参数

Question

有人知道编写jQuery扩展来处理查询字符串参数的好方法吗？我基本上想扩展jQuery魔术($)功能,所以我可以这样做:

$('?search').val(); 

这将使我在下面的网址值"测试": http://www.example.com/index.php?search=test.

我已经看到很多函数可以在jQuery和Javascript中执行此操作,但实际上我希望扩展jQuery以完全按照上面所示的方式工作.我不是在寻找一个jQuery插件,我正在寻找jQuery方法的扩展.

Answer 1

为什么要扩展jQuery？扩展jQuery与仅具有全局功能有什么好处？

function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
    var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
    return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}

http://jsfiddle.net/gilly3/sgxcL/

另一种方法是解析整个查询字符串并将值存储在对象中供以后使用.这种方法不需要正则表达式并扩展window.location对象(但是,可以很容易地使用全局变量):

location.queryString = {};
location.search.substr(1).split("&").forEach(function (pair) {
    if (pair === "") return;
    var parts = pair.split("=");
    location.queryString[parts[0]] = parts[1] &&
        decodeURIComponent(parts[1].replace(/\+/g, " "));
});

http://jsfiddle.net/gilly3/YnCeu/

此版本也可以使用Array.forEach(),在IE7和IE8中本机不可用.它可以通过在MDN上使用实现来添加,或者您可以使用jQuery $.each()代替.

Answer 2

JQuery jQuery-URL-Parser插件做同样的工作,例如检索搜索查询字符串param 的值,你可以使用

$.url().param('search');

此库未被主动维护.正如同一插件的作者建议,您可以使用URI.js.

或者你可以改用js-url.它与下面的相似.

所以你可以访问查询参数 $.url('?search')

Answer 3

在SitePoint找到我们的朋友发现的这个宝石. https://www.sitepoint.com/url-parameters-jquery/.

使用PURE jQuery.我只是用它而且它有效.稍微调整一下,例如清酒.

//URL is http://www.example.com/mypage?ref=registration&email=bobo@example.com

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('ref')); //registration
console.log($.urlParam('email')); //bobo@example.com

随意使用.

Answer 4

这不是我的代码示例,但我过去曾使用它.

//First Add this to extend jQuery

    $.extend({
      getUrlVars: function(){
        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;
      },
      getUrlVar: function(name){
        return $.getUrlVars()[name];
      }
    });

    //Second call with this:
    // Get object of URL parameters
    var allVars = $.getUrlVars();

    // Getting URL var by its name
    var byName = $.getUrlVar('name');

Answer 5

经过多年的丑陋字符串解析后,有一种更好的方法:URLSearchParams让我们看一下如何使用这个新API从该位置获取值!

//假设"？post = 1234&action = edit"

var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?

post=1234&action=edit&active=1"

更新:IE不受支持

使用此函数而不是URLSearchParams

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.href);
    if (results == null) {
         return 0;
    }
    return results[1] || 0;
}

console.log($.urlParam('action')); //edit

Answer 6

我写了一个小函数,你只需要解析查询参数的名称.因此,如果您有:？Project = 12&Mode = 200&date = 2013-05-27并且您想要'Mode'参数,您只需要将'Mode'名称解析为函数:

function getParameterByName( name ){
    var regexS = "[\\?&]"+name+"=([^&#]*)", 
  regex = new RegExp( regexS ),
  results = regex.exec( window.location.search );
  if( results == null ){
    return "";
  } else{
    return decodeURIComponent(results[1].replace(/\+/g, " "));
  }
}

// example caller:
var result =  getParameterByName('Mode');

Answer 7

基于@Rob Neild上面的答案,这里是一个纯粹的JS改编,返回一个解码查询字符串参数的简单对象(没有%20的等).

function parseQueryString () {
  var parsedParameters = {},
    uriParameters = location.search.substr(1).split('&');

  for (var i = 0; i < uriParameters.length; i++) {
    var parameter = uriParameters[i].split('=');
    parsedParameters[parameter[0]] = decodeURIComponent(parameter[1]);
  }

  return parsedParameters;
}