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

有人知道编写 jQuery 扩展来处理查询字符串参数的好方法吗?我基本上想要扩展 jQuery Magic ($)函数,这样我就可以做这样的事情:

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

它会给我以下 URL 中的值“ test”: http://www.example.com/index.php?search=test

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

415954 次浏览

这不是我的代码示例,但我以前使用过它。

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

JQueryJQuery-URL-Parser插件做同样的工作,例如检索 搜索查询字符串参数的值,可以使用

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

这个库没有主动维护。正如同一个插件的作者所建议的那样,你可以使用 URI.js

或者你可以用 Js-url来代替,它和下面这个非常相似。

因此,您可以访问像 $.url('?search')这样的查询参数

为什么要扩展 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中本身不可用的 Array.forEach()。它可以通过使用 MDN 的实现来添加,也可以使用 jQuery 的 $.each()来代替。

我编写了一个小函数,只需解析查询参数的名称即可。那么,如果你有: ?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');

基于@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;
}

用 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.

经过多年难看的字符串解析,现在有一个更好的方法: 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
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;
}

我用这个。

function getQueryStringValue(uri, key) {
var regEx = new RegExp("[\\?&]" + key + "=([^&#]*)");
var matches = uri.match(regEx);
return matches == null ? null : matches[1];
}


function testQueryString(){
var uri = document.getElementById("uri").value;
var searchKey = document.getElementById("searchKey").value;
var result = getQueryStringValue(uri, searchKey);
document.getElementById("result").value = result;
}
<input type="text" id="uri" placeholder="Uri"/>
<input type="text" id="searchKey" placeholder="Search Key"/>
<Button onclick="testQueryString()">Run</Button><br/>


<input type="text" id="result" disabled placeholder="Result"/>