使用jQuery / Javascript获取查询字符串参数url值(querystring)


149

有人知道编写jQuery扩展来处理查询字符串参数的好方法吗?我基本上想扩展jQuery魔术($)函数,因此可以执行以下操作:

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

这将使我在以下URL中获得值“ test” :http://www.example.com/index.php?search=test

我已经看到了很多可以在jQuery和Javascript中实现此功能的函数,但实际上我想扩展jQuery以使其完全如上所示工作。我不是在寻找jQuery插件,而是在寻找jQuery方法的扩展。



1
@NicoWesterdale-我浏览了该链接,但没有找到解决此特定问题的任何答案。他说他想要完全一样。
mrtsherman 2011年

2
我认为您无法做到这一点,传入的字符串被sizzler解析,然后解析为DOM对象数组。您可以扩展匹配器以提供自定义过滤器,但不能具有基于字符串的jquery对象。
安德鲁

6
是不是$超载还不够吗?
昆汀

1
@mrtsherman在我提供的链接中查看getParameterByName()函数。不,您不能直接在$提示符内执行此操作,但这不是jQuery选择器的作用。他只是选择URL字符串的一部分,而不是尝试访问$()所做的DOM的一部分。这是完全不同的事情。如果您真的想使用jQuery,则可以编写一个使用以下语法的插件:$ .getParameterByName(param),在该页面上还有一个示例,我链接到的示例确实如此。虽然有点没意义。
Nico Westerdale

Answers:


46

经过多年的丑陋字符串解析之后,有一种更好的方法: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.search);

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

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

1
所有浏览器都支持URLSearchParams吗?

糟糕!哦,老兄,不支持IE!我刚刚测试过。虽然Chrome,FF和Safari没有问题。
沙林

1
@divine-URLSearchParams此处有一个polyfill
Roberto

如果您为不受支持的浏览器添加一个polyfill,则此URLSearchParams解决方案效果很好。github.com/ungap/url-search-params
Louisvdw

104

为什么要扩展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()


2
这并不常见,但在查询参数中使用分号代替“&”符号是有效的。
Muhd

@Muhd-只要您的代码可以理解,在查询字符串中使用您喜欢的任何分隔符都是“有效的”。但是,提交表单后,表单字段name=value将成对提交,并以分隔&。显然,如果您的代码使用的是自定义查询字符串格式,则无论在服务器还是客户端上,无论何时使用查询字符串,都需要编写自定义查询字符串解析器。
gilly3

2
@nick-有趣。但是,他们建议HTTP服务器在使用链接模仿表单提交时,将分号视为“&”号,这只会使HTML更漂亮。这只是一个建议,并非标准。标准表单GET提交的编码为application/x-www-form-urlencoded,值之间用分隔&。我的代码处理该标准。自定义url结构(例如您链接的URL结构)将需要服务器端和客户端的自定义解析器。无论如何,在上面的代码中添加这种功能都是微不足道的。
gilly3

1
@gilly确实是-如果您想要可移植的代码,则需要同时支持两者
尼克,

1
在RegExp()中添加“ i”,以便键不区分大小写:new RegExp(“ [?&]” + key +“ =([[^&] +)(&| $)”,“ i”));
Yovav

94

jQuery jQuery-URL-Parser插件执行相同的工作,例如检索搜索查询字符串参数的值,则可以使用

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

该库未积极维护。正如同一插件的作者建议,您可以使用URI.js

或者,您可以改用js-url。它与下面的非常相似。

这样您就可以访问查询参数 $.url('?search')


2
真好 而且代码在公共领域,因此您甚至不必包括注释。
Muhd

4
好的解决方案,但是如果您恰巧通过file://进行测试,将无法正常工作
kampsj 2014年

1
与@kampsj有什么关系
RameshVel 2014年

3
@kampsj,您好,使用file://协议进行测试将导致更多内容无法使用。您可以使用node.js创建一个非常快速简便的静态HTML服务器。 stackoverflow.com/questions/16333790/…–
Jess

2
该插件不再维护,作者本人建议改用其他插件。
JanErikGunnar

77

在SitePoint从我们的朋友那里找到了这颗宝石。 https://www.sitepoint.com/url-parameters-jquery/

使用纯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

随便使用。


大。谢谢!我认为您不需要最后一个大括号标签。
bhtabor '16

嗯,是的,您是对的。编辑帖子。那是我代码中某些if语句遗留下来的。谢谢。
ClosDesign 2013年

1
您应该使用window.location.search而不是.href-否则很好。
BrainSlugs83

4
取而代之的是results[1] || 0,您必须(返回){return results [1]}返回0;bcoz查询参数可能根本不存在。修改将处理所有一般情况。
myDoggyWritesCode

1
如果有类似的事情该怎么办https://example.com/?c=Order+ID?该加号仍保留在此功能上。
Volomike

47

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

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

2
您不应该在'='上拆分,在任何键/值对的值中都有第二个等号在技术上是可以的。-仅将您遇到的第一个等号(每个键/值对)视为定界符。(此外,并非严格要求等号;可能会有没有值的键。)
BrainSlugs83

清洁溶液。在我的情况下效果很好。
肯尼迪·加格农

$ .extend({ '); for(var i = 0; i <hashes.length; i ++){hash = hashhes [i] .split('='); var k = hash.shift(); vars.push(k); vars [k] = hash.join(“”);} return vars;},getUrlVar:function(name){return $ .getUrlVars()[name];}});
Mupinc

15

我写了一个小函数,您只需要解析查询参数的名称。因此,如果您具有:?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');

如果你的名字有没有垃圾,你可以删除第一正则表达式,它更有意义,从location.search开始
mplungjan

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

使用此代码我没有看到任何错误。你使用的是什么浏览器?我已经针对当前的Firefox,Chrome和Safari对它进行了测试。

是的,对不起,我读错了。我以为我看到它在返回未定义的东西上调用了方法。因此,实际上它只在不需要时运行一次。搜索为时""。并且您得到{“”:“ undefined”}
Jerinaw

是的 这可能需要一些改进。

1

用Vanilla Javascript写

     //Get URL
     var loc = window.location.href;
     console.log(loc);
     var index = loc.indexOf("?");
     console.log(loc.substr(index+1));
     var splitted = loc.substr(index+1).split('&');
     console.log(splitted);
     var paramObj = [];
     for(var i=0;i<splitted.length;i++){
         var params = splitted[i].split('=');
         var key = params[0];
         var value = params[1];
         var obj = {
             [key] : value
         };
         paramObj.push(obj);
         }
    console.log(paramObj);
    //Loop through paramObj to get all the params in query string.

1
function parseQueryString(queryString) {
    if (!queryString) {
        return false;
    }

    let queries = queryString.split("&"), params = {}, temp;

    for (let i = 0, l = queries.length; i < l; i++) {
        temp = queries[i].split('=');
        if (temp[1] !== '') {
            params[temp[0]] = temp[1];
        }
    }
    return params;
}

我用这个

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.