使用jQuery / Javascript获取查询字符串参数url值（querystring）更新：不支持 IE

javascript jquery url query-string jquery-plugins

2022-08-30 01:52:25

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

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

这将在以下URL中为我提供值“test”：。http://www.example.com/index.php?search=test

我已经看到很多函数可以在jQuery和Javascript中做到这一点，但我实际上想扩展jQuery以完全按照上面所示的方式工作。我不是在寻找jQuery插件，我正在寻找jQuery方法的扩展。

答案 1

经过多年的丑陋字符串解析，有一个更好的方法：URLSearchParams让我们来看看如何使用这个新的API从位置获取值！

//Assuming URL has "?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

答案 2

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

此版本还使用了在 IE7 和 IE8 中本机不可用的。它可以通过使用MDN的实现来添加，或者你可以使用jQuery的$.each（）来代替。Array.forEach()