js获取url参数的使用扩展实例

下面是“js获取url参数的使用扩展实例”的完整攻略。

下面是“js获取url参数的使用扩展实例”的完整攻略。

1. 获取URL参数的基础方法

获取URL参数是前端开发常用的一项技巧，一般可以通过以下方式获取：

function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}

这段代码中，GetQueryString函数接受一个参数name，表示要获取的参数名。代码中的正则表达式用来匹配URL中的参数名和值。如果找到了参数名，就返回对应的参数值；否则返回null。

下面是获取URL中的参数id的示例代码：

var id = GetQueryString("id");
console.log("获取到的参数id为：" + id);

2. 扩展方法一：获取URL参数对象

上面的方法只能用来获取一个参数的值。如果要获取多个参数的值，就需要修改上面的代码。下面的代码实现了获取URL参数对象的功能：

function GetQueryObject() {
  var search = window.location.search.substr(1);
  var obj = {};
  var reg = /([^?&=]+)=([^?&=]*)/g;
  search.replace(reg, function (rs, $1, $2) {
    var name = decodeURIComponent($1);
    var val = decodeURIComponent($2);
    val = String(val);
    obj[name] = val;
    return rs;
  });
  return obj;
}

这段代码中，GetQueryObject函数不再接受参数，而是通过正则表达式将URL中的参数名和值转换成一个对象，其中参数名作为对象的属性名，参数值作为对象的属性值。

下面是获取URL中所有参数的示例代码：

var obj = GetQueryObject();
console.log("获取到的参数对象为：" + JSON.stringify(obj));

3. 扩展方法二：获取URL中的hash值

除了获取URL参数，还有一种常见的需求是获取URL中的hash值，也就是在URL中#符号后面的那部分。下面的代码实现了获取URL中的hash值：

function GetUrlHash() {
  var hash = window.location.hash;
  return hash.substr(1);
}

这段代码中，GetUrlHash函数直接通过window.location.hash获取URL中的hash值，并且去除了#符号。

下面是获取URL中的hash值的示例代码：

var hash = GetUrlHash();
console.log("获取到的hash值为：" + hash);

以上就是“js获取url参数的使用扩展实例”的完整攻略，希望对你有帮助。