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

38 浏览
0 Comments

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

有人知道写一个jQuery扩展来处理查询字符串参数的好方法吗？我想要扩展jQuery的魔法 ($) 函数，这样我就可以做到下面的功能：

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

从下面的URL里获取值为“test”：http://www.example.com/index.php?search=test。

我看到过很多可以在jQuery和Javascript中实现此功能的函数，但实际上我想扩展jQuery，使其能够像上面展示的那样工作。我不是要寻找一个jQuery插件，而是要寻找一个扩展jQuery方法的方法。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

为什么要扩展jQuery？扩展jQuery与仅拥有全局函数相比有什么好处？\n\n

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, " "));
}

\n\n一种替代方法是解析整个查询字符串并将值存储在对象中以供以后使用。这种方法不需要正则表达式并扩展了window.location对象（但是，也可以轻松使用全局变量）：\n\n

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, " "));
});

\n\n此版本还利用了Array.forEach()，它在IE7和IE8中无法本地使用。可以使用MDN上的实现来添加它，或者可以使用jQuery的$.each()代替。

0
0 Comments

经过多年丑陋的字符串解析，现在有了更好的方法：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

0