JavaScript之页面url参数获取

从事web开发，总是缺少不了页面之间的交互，在这个过程中核心是页面 url 参数的传递。那要怎样获取页面中 url 具体的参数呢？
首先我们先要了解一下 url 的组成，以 http://www.jianshu.com/c/bd38bd199ec6?utm_medium=index-collections&utm_source=desktop#name 为例说明。

·protocol 协议：通常是http 协议，本例子显示为：“http”；
·host 主机地址：可以是地址，也可以是ip 地址，本例子显示为：“www.jianshu.com”；
·port 端口：http 默认端口是：80端口，本例子显示为：80端口；
·pathname 路径：网络资源在服务器中的指定路径，本例子显示：“/c/bd38bd199ec6”；
·search参数：一般是“？”字符后的字符串，本例子显示为：“?utm_medium=index-collections&utm_source=desktop”；
·hash 锚点：一般是“#”后的字符串，指网页中的片段，设置锚点可以直接到达页面指定的位置，本例子显示为：“#name”。

下面我们来展示一下获取页面 url 具体参数的方法：
1、设置或获取整个url： window.location.href

var test = window.location.href;
alert(test);  // http://www.jianshu.com/c/bd38bd199ec6?utm_medium=index-collections&utm_source=desktop#name

2、设置或获取 url 的 protocol 协议部分：window.location.protocol

var test = window.location.protocol;
alert(test);  // http

3、设置或获取 url 的主机名：window.location.host

var test = window.location.post;
alert(test);  // www.jianshu.com

4、设置或获取 url 的端口：window.location.port

var test = window.location.port;
alert(test);  //空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)

5、设置或获取 url 的路径：window.location.pathname

var test = window.location.pathname;
alert(test);  //  /c/bd38bd199ec6

6、设置或获取 url 的参数：window.location.search

var test = window.location.search;
alert(test);  //  ?utm_medium=index-collections&utm_source=desktop

7、设置或获取 页面的锚点：window.location.hash

var test = window.location.hash;
alert(test);  //  #name

8、JavaScript 获取 url 中的参数
（1）、正则方法

function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');  //设置正则匹配规范
  var r = window.location.search.substr(1).match(reg);  // 获取“？”后的字符串并正则匹配
  if (r != null) {
    return decodeURIComponent(r[2]); // 解码参数部分
  }
  return null;
}

（2）、split拆分法

function getRequest() {
  var url = window.location.search; 
  var theRequest = new Object();
  if(url.indexof != -1) { //判断是否有参数
    var str = url.substr(1);  //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
    strs = str.split("&");  //截除“&”生成一个数组
    var i = 0, len = strs.length;
    for(i = 0; i < len; i++) {
      theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);  
    }
  }
  console.log(theRequest);
}
getRequest(); // {utm_medium: "index-collections", utm_source: "desktop"}

（3）获取指定参数的值

function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  var context = '';
  if (r != null) {
    context = r[2];
  }
  reg = null; 
  r = null; 
  return context == null || context == "" || context == "undefined" ? "" : context; 
}
getQueryString("utm_medium");  // "index-collections"

（4）、单个参数的获取

function GetRequest() {
  var url = location.search; 
  if (url.indexOf("?") != -1) {  
   var str = url.substr(1); 
   strs = str.split("=");  
   console.log(strs[1]);     
  }
}
GetRequest(); // index-collections&utm_source

戳我博客