用正則運算式獲取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;
}

總結

正則運算式的方式更加靈活便捷啊，開始用的時候不習慣，后來覺得真香！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/170390.html

標籤：JavaScript

上一篇：按需動態加載js

下一篇：你不知道的JS系列【1】- 什么是作用域