使用jQuery / Javascript(查询字符串)获取查询字符串参数url值
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jQuery / Javascript(查询字符串)获取查询字符串参数url值相关的知识,希望对你有一定的参考价值。
有人知道编写jQuery扩展来处理查询字符串参数的好方法吗?我基本上想扩展jQuery magic ($)
函数,所以我可以这样做:
$('?search').val();
这将给我在以下URL中的值“test”:http://www.example.com/index.php?search=test
。
我已经看到很多函数可以在jQuery和javascript中执行此操作,但实际上我希望扩展jQuery以完全按照上面所示的方式工作。我不是在寻找一个jQuery插件,我正在寻找jQuery方法的扩展。
在SitePoint找到我们的朋友发现的这个宝石。 https://www.sitepoint.com/url-parameters-jquery/。
使用PURE 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
随意使用。
为什么要扩展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中原生不可用。它可以使用the implementation at MDN添加,或者你可以使用jQuery的$.each()
代替。
JQuery jQuery-URL-Parser插件做同样的工作,例如检索搜索查询字符串param的值,你可以使用
$.url().param('search');
此库未被主动维护。根据同一插件的作者的建议,您可以使用URI.js。
或者你可以使用js-url代替。它与下面的相似。
因此,您可以像$.url('?search')
一样访问查询参数
这不是我的代码示例,但我过去曾使用它。
//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');
经过多年的丑陋字符串解析后,有一种更好的方法: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"
UPDATE : IE is not supported
使用此函数而不是URLSearchParams
$.urlParam = function (name) {
var results = new RegExp('[?&]' + name + '=([^&#]*)')
.exec(window.location.href);
if (results == null) {
return 0;
}
return results[1] || 0;
}
console.log($.urlParam('action')); //edit
我写了一个小函数,你只需要解析查询参数的名称。因此,如果您有:?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;
}
写在香草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 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;
}
我用这个。
以上是关于使用jQuery / Javascript(查询字符串)获取查询字符串参数url值的主要内容,如果未能解决你的问题,请参考以下文章
使用 jQuery / Javascript (querystring) 获取查询字符串参数 url 值
使用jQuery / Javascript(查询字符串)获取查询字符串参数url值
使用 jquery、javascript 或 PHP 生成查询字符串