用正則表達式獲取URL中的查詢參數

總結獲取url中查詢參數的兩種方式

經過正則表達式獲取單個參數

url中的全部查詢參數能夠經過 window.location.search 字段獲取，以字符串的形式返回。並有固定的格式 ?param1=value1&param2=value2···，因此能夠正則表達式匹配。

分析下須要匹配的格式：

• param=value, 其中須要獲取的是value部分，可是也須要 param= 參與匹配，可是不能參與返回結果，這裏有先後查找的問題
• ?param=value 和 &param=value 均可能存在，參數名稱緊跟在?或&以後；還要注意的是，要區分 emali和mail 這種名稱，/mail/既能匹配到email又能匹配mail，因此要給參數名稱加一個邊界，名稱的上一個字符要是一個非單詞(\W)的字符，這樣就能夠解決這兩個問題
• value後多是空，也多是下一組參數(以&分割)，因此value的值要匹配到[^&]爲止
• 因爲參數名稱是變化的，因此須要用字符串的形式來生成正則表達式

先後查找和邊界的介紹能夠細看MDN中的詳細介紹。

搞定正則以後，使用string的match方法，就能直接獲取到對應的參數值

function getUrlParamsByName(name) {
    // \b 邊界   
    // ?<= 向後匹配 
    // 字符串轉成正則表達式，其中的'\b'類型的特殊字符要多加一個'\'
    let reg = new RegExp(`(?<=\\b${name}=)[^&]*`),
    str = location.search || '',
    target = str.match(reg);
    
    if(target) {
        return target[0]
    }

    return;
}

解析全部參數，以對象返回

上一個方法是獲取單個的參數值，此方法是爲了解析出全部的參數

利用string的一些工具函數取值，注意一些異常場景的判斷

function getUrlParams() {
    let obj = {};

    if (!window) {
        return; 
    }

  let str = window.location.search || '';
  
  if (str && str.slice(1)) {
     // 去掉 ？ ，而後以 & 分割
    let queryArray = str.slice(1).split('&');
    queryArray.map((query) => {
      // param=value 以 = 分割
      let temp = query.split('=');
      if(temp.length > 1) {
      // 收集參數
      obj[temp[0]] = temp[1];
      }
    })
  }

    return obj;
}

總結

正則表達式的方式更加靈活便捷啊，開始用的時候不習慣，後來以爲真香！