獲取地址欄（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"); // ''
複製代碼

瀏覽器兼容