获取地址栏（url）参数

背景：实际开发中须要获取地址栏参数值来进行一些逻辑处理，尤为是H5开发最为常见

下面介绍几种简单的实现方法，欢迎补充

方法1：经过正则匹配

路由地址为hash模式

function getUrlParam(name, url) {
    let u = arguments[1] || window.location.href,
        reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
        r = u.substr(u.indexOf("?") + 1).match(reg);
    return r != null ? decodeURI(r[2]) : "";
  };
 
  //https://cdn.demo.com/index.html#/?gameid=1024&posid=996&autoopenpage=true
  
  getUrlParam("gameid"); // 1024
  getUrlParam("posid"); // 996
  getUrlParam("autoopenpage"); // true
  getUrlParam("nothing"); // ''
复制代码

路由地址写为history模式

//https://cdn.demo.com/index.html?gameid=1024&posid=996&autoopenpage=true
  
  getUrlParam("gameid"); // 1024
  getUrlParam("posid"); // 996
  getUrlParam("autoopenpage"); // true#/
  getUrlParam("nothing"); // ''
复制代码

当前模式下获取到的最后一个有效参数值包含了'#/',具体缘由为hash和history模式致使，若是不支持history，会自动补齐#/

只需稍微改动一下便可，判断是否包含#，若是有则substring掉，没有直接return

function getUrlParam(name, url) {
    let qs = arguments[1] || window.location.href,
        reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
        r = qs.substr(qs.indexOf("?") + 1).match(reg);
    if(r !== null){
      let i = decodeURI(r[2]).indexOf('#');
      if(i !== -1) {
        return decodeURI(r[2]).substring(0,i);
      }else{
        return decodeURI(r[2]);
      };
    }else{
      return '';
    };
  };
  
  //https://cdn.demo.com/index.html?gameid=1024&posid=996&autoopenpage=true
  
  getUrlParam("gameid"); // 1024
  getUrlParam("posid"); // 996
  getUrlParam("autoopenpage"); // true
  getUrlParam("nothing"); // ''
复制代码

浏览器兼容

方法2：经过location上的search方法,支持全部模式

function getUrlParam(name, url) {
    let qs = arguments[1] || loaction.search.length > 0 ? location.search.substring(1) : '',
    	args = {};
    for(let item of qs.split("&").map(val => val.split("="))) {
    	return name == item[0] ? item[1] : '';
    };
  };
  
  //https://cdn.demo.com/index.html?gameid=1024&posid=996&autoopenpage=true
  
  getUrlParam("gameid"); // 1024
  getUrlParam("posid"); // 996
  getUrlParam("autoopenpage"); // true
  getUrlParam("nothing"); // ''
复制代码

浏览器兼容

方法3：经过location上的search方法和URLSearchParams，支持全部模式

function getUrlParam(name, url) {
    let qs = arguments[1] || location.search.length > 0 ? location.search.substring(1) : '',
    	args = {};
    let searchParams = new URLSearchParams(qs);
    return searchParams.get(name) ? searchParams.get(name) : '';
  };
  
  //https://cdn.demo.com/index.html?gameid=1024&posid=996&autoopenpage=true
  
  getUrlParam("gameid"); // 1024
  getUrlParam("posid"); // 996
  getUrlParam("autoopenpage"); // true
  getUrlParam("nothing"); // ''
复制代码

浏览器兼容