有没有什么好的方法编写 jQuery 扩展来处理查询字符串参数？我基本上想扩展 jQuery 魔术符 ($) 函数，这样我就可以像这样做：
$('?search').val();
如何从以下URL中获取值为"test": http://www.example.com/index.php?search=test。
我看到很多jQuery和Javascript函数可以实现这一点，但实际上我想扩展jQuery以完全按照上面所示的方式工作。 我不是要寻找一个jQuery插件，而是要寻找一个扩展jQuery方法的方法。
经过多年的丑陋字符串解析，现在有了更好的方法：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"
请使用下面的答案中的此函数，而不是使用 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
https://mytest.com/bippo/#/?utm_source=teeest 或 https://mytest.com/bippo/#/url/?utm_source=teeest。 - ToskandecodeURIComponent 并将 + 替换为空格...请参阅先前的解决方案。 - farialimafunction 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() 替代。application/x-www-form-urlencoded，值由&分隔。我的代码处理该标准。像您链接的自定义URL结构将需要自定义解析器服务器端和客户端。无论如何，在我的上述代码中添加这种功能都是微不足道的。 - gilly3jQuery jQuery-URL-Parser 插件可以完成同样的工作，例如要检索“search”查询字符串参数的值，您可以使用：
$.url().param('search');
这个库没有得到积极的维护。正如同类插件的作者所建议的那样，你可以使用URI.js。
或者你可以使用js-url。它与下面的插件非常相似。
因此，你可以像这样访问查询参数$.url('?search')
在我们朋友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
随意使用。
results [1] || 0，你需要使用if (results) {return results [1]} return 0;，因为查询参数可能根本不存在。修改后可以处理所有通用情况。 - master_dodohttps://example.com/?c=Order+ID 这样的东西，你该怎么办？这个加号仍然存在于这个函数中。 - Volomike以下不是我的代码示例，但我过去使用过它。
//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');
我写了一个小函数，你只需要解析查询参数的名称。所以如果你有这样的查询参数：?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;
}
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;
}
使用纯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.
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"/>