获取地址栏（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"); // ''

浏览器兼容