用正則表示式獲取URL中的查詢引數
阿新 • • 發佈:2020-12-12
總結獲取url中查詢引數的兩種方式
通過正則表示式獲取單個引數
url中的所有查詢引數可以通過window.location.search欄位獲取,以字串的形式返回。並有固定的格式?param1=value1¶m2=value2···,所以可以正則表示式匹配。
分析下需要匹配的格式:
- param=value, 其中需要獲取的是value部分,但是也需要param=參與匹配,但是不能參與返回結果,這裡有前後查詢的問題
- ?param=value和¶m=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;
}
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
解析所有引數,以物件返回
上一個方法是獲取單個的引數值,此方法是為了解析出所有的引數
利用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;
}
總結
正則表示式的方式更加靈活便捷啊,開始用的時候不習慣,後來覺得真香!