使用JavaScript获取URL参数

最新推荐文章于 2024-06-04 19:55:06 发布

PTKGEM

最新推荐文章于 2024-06-04 19:55:06 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： javascript url参数获取

JavaScript 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

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

本文转载自：众成翻译
译者：kayson
链接：http://www.zcfy.cc/article/1173
原文：https://www.sitepoint.com/get-url-parameters-with-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参数了，并且顺便学会了一些其他的技巧。