成为VIP
✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦
你想从URL里获取参数？ URL参数（也叫查询字符串参数获URL变量）可包含很多有用的数据，如产品信息、用户偏好、链接来源等等。
让我们开始吧！
1 获取URL参数
假设你有如下的url:
“
这里有个函数，它给你一个包含所有URL参数的简单对象：
（上下滑动看代码）
function getAllUrlParams(url) {
// 从url(可选)或window对象获取查询字符串
var queryString = url ? url.split(‘?’)[1] : window.location.search.slice(1);
// 我们把参数保存在这里
var obj = {};
// 如果查询字符串存在
if (queryString) {
// 查询字符串不包含#后面的部分，因此去掉它
queryString = queryString.split(‘#’)[0];
// 把查询字符串分割成各部分
var arr = queryString.split(‘&’);
for (var i=0; i
// 分离出key和value
var a = arr[i].split(‘=’);
// 考虑到这样的参数：list[]=thing1&list[]=thing2
var paramNum = undefined;
var paramName = a[0].replace(/[d*]/, function(v) {
paramNum = v.slice(1,-1);
return ”;
});
// 设置参数值（如果为空则设置为true）
var paramValue = typeof(a[1])===’undefined’ ? true : a[1];
// （可选）保持大小写一致
paramName = paramName.toLowerCase();
paramValue = paramValue.toLowerCase();
// 如果参数名已经存在
if (obj[paramName]) {
// 将值转成数组（如果还是字符串）
if (typeof obj[paramName] === ‘string’) {
obj[paramName] = [obj[paramName]];
}
// 如果没有指定数组索引
if (typeof paramNum === ‘undefined’) {
// 将值放到数组的末尾
obj[paramName].push(paramValue);
}
// 如果指定了数组索引
else {
// 将值放在索引位置
obj[paramName][paramNum] = paramValue;
}
}
// 如果参数名不存在则设置它
else {
obj[paramName] = paramValue;
}
}
}
return obj;
}
很快你会看到这是怎么工作的，但首先，这里有些用法示例：
getAllUrlParams().product; // ‘shirt’
getAllUrlParams().color; // ‘blue’
getAllUrlParams().newuser; // true
getAllUrlParams().nonexistent; // undefined
getAllUrlParams(‘http://test.com/?a=abc’).a; // ‘abc’
2 本函数使用须知
如果你只是想要一个可以放到你的代码里的函数，你已经完成了。如果你想了解这个函数是怎么工作的，继续看。
3 函数是如何工作的
总体来说，该函数接收一个URL的查询字符串（?之后#之前的部分），然后将数据提取到一个简洁对象里。
首先，这行代码的意思是，如果我们指定一个URL，则获取问号之后的所有内容js切割字符串，如果不指定的话，就用window对象的URL。
`var queryString = url ? url.split(‘?’)[1] : window.location.search.slice(1);`
接下来，我们将创建一个对象js切割字符串，用来保存我们的参数。
`var obj = {};`
如果查询字符串存在，我们则会解析它。首先我们必须确保去掉以#开头的部分，因为它不是查询字符串的一部分。
`queryString = queryString.split(‘#’)[0];`
现在我们可以把查询字符串分割成各组成部分。
`var arr = queryString.split(‘&’);`
这会给我们一个看起来像这样的数组：
`[‘product=shirt’, ‘color=blue’, ‘newuser’, ‘size=m’]`
接下来我们将遍历该数组并将每一项分隔成一个key和一个value，用来存放对象。
`var a = arr[i].split(‘=’);`
我们将需要处理像这样的重复参数或数组参数：
colors=red&colors=green&colors=blue
colors[]=red&colors[]=green&colors[]=blue
colors[0]=red&colors[2]=green&colors[5]=blue
为了处理重复和数组，我们首先把参数的索引号默认设置为undefined。然后我们把方括号内所有为零或者多个数字的参数名替换掉（如[]或[2]或[45]）。在替换的同时，我们记录下是否存在相同的索引号。
var paramNum = undefined;
var paramName = a[0].replace(/[d*]/, function(v){
paramNum = v.slice(1,-1);
return ”;
});
现在我们要设置参数值了。如果没有值，我们就把它设置为true表示参数名存在。你可以根据应用场景自行修改。
`var paramValue = typeof(a[1])===’undefined’ ? true : a[1];`
根据需要，你可以设置所有参数名和值为小写字母。这样就可以避免出现当有人在url里发送example=TRUE而不是 example=true 时搞挂你的代码了（我经常碰到）。然而，如果你的查询字符串需要区分大小写，可以随意略过这部分：
paramName = paramName.toLowerCase();
paramValue = paramValue.toLowerCase();
如果在循环中这一步一个参数名已经存在，我们需要把值放进一个数组里，像这样：
（上下滑动看代码）
// if parameter name already exists
if (obj[paramName]) {
// convert value to array (if still string)
if (typeof obj[paramName] === ‘string’) {
obj[paramName] = [obj[paramName]];
}
// if no array index number specified…
if (typeof paramNum === ‘undefined’) {
// put the value on the end of the array
obj[paramName].push(paramValue);
}
// if array index number specified…
else {
// put the value at that index number
obj[paramName][paramNum] = paramValue;
}
}
如果参数名还不存在，我们就创建它并设置正确的值。
`obj[paramName] = paramValue;`
最后，我们返回这个带有参数和值的对象。
如果你的URL有经过编码的特殊字符例如空格（编码为%20），你也可以通过解码获取原来的值，像这样：
// assume a url parameter of test=a%20space
var original = getAllUrlParams().test; // ‘a%20space’
var decoded = decodeURIComponent(original); // ‘a space’
只是要小心不要解码已经解码过的字符，否则你会得到一个错误，尤其是包含百分号的时候。
不管怎样，恭喜你！现在你知道如何获取URL参数了，并且顺便学会了一些其他的技巧。
4 总结
本文的代码适用于需要获取URL参数的大部分常见情况。如果你需要处理任何边界情况，比如不常见的分隔符或特殊格式，那么确保经过测试并且做相应调整。
如果你想对URL做更多的事，这里有些特定的库，如jQuery URL 插件 和 Medialize URI.js。由于基本上都是字符串操作，使用纯JavaScript是合理的。无论你使用自己的代码还是库，确保检查一切以保证对你的用例有效。
✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦
限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688
htebazile
