使用JavaScript获取URL参数

快速提示：使用JavaScript获取URL参数

本文转载自：众成翻译

译者：kayson

链接：http://www.zcfy.cc/article/1173

原文：https://www.sitepoint.com/get-url-parameters-with-javascript/

该作者的更多文章

不用jQuery做一个简单的JavaScript幻灯片

帮助你更快学习JavaScript的六个简单技巧

你想从URL里获取参数？ URL参数（也叫查询字符串参数获URL变量）可包含很多有用的数据，如产品信息、用户偏好、链接来源等等。

让我们开始吧！

获取URL参数

假设你有如下的url:

`http://example.com/?product=shirt&color=blue&newuser&size=m`

这里有个函数，它给你一个包含所有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<arr.length; 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'

本函数使用须知

我们的函数假设参数是用

&

字符分隔的，正如 W3C 规范所指出的。然而，URL参数格式通常 没有明确定义，所以你有时候会碰到

;

或者

&

作为 分隔符。

如果参数没有等号或者有等号但没有值，我们的函数依然可以工作。

重复参数的值会放到数组里。

如果你只是想要一个可以放到你的代码里的函数，你已经完成了。如果你想了解这个函数是怎么工作的，继续看。

接下来的章节假设你知道一些JavaScript，包括函数、对象和数组。如果你需要复习，查阅 MDN JavaScript 参考.

函数是如何工作的

总体来说，该函数接收一个URL的查询字符串（

?

之后

#

之前的部分），然后将数据提取到一个简洁对象里。

首先，这行代码的意思是，如果我们指定一个URL，则获取问号之后的所有内容，如果不指定的话，就用window对象的URL。

`var queryString = url ? url.split('?')[1] : window.location.search.slice(1);`

接下来，我们将创建一个对象，用来保存我们的参数。

`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参数了，并且顺便学会了一些其他的技巧。

总结

本文的代码适用于需要获取URL参数的大部分常见情况。如果你需要处理任何边界情况，比如不常见的分隔符或特殊格式，那么确保经过测试并且做相应调整。

如果你想对URL做更多的事，这里有些特定的库，如jQuery URL 插件 和 Medialize URI.js。由于基本上都是字符串操作，使用纯JavaScript是合理的。无论你使用自己的代码还是库，确保检查一切以保证对你的用例有效。