對前端同學來說,經常要碰到一種比較麻煩的情況,那就是url查詢字符串的解析問題。說起來也不難,就是比較麻煩。
具體來處理這種情況的時候,相信有一部分同學就是針對具體項目中的需要的字符去正則匹配一下,業務需求嘛,解決就算了。原來我也是這樣干的。不過最好還是抽一種方法出來,畢竟這種工具類的發放很多地方都會用到。當然現在github上有很多大牛的作品可以借鑒。今天自己也來實現一下。
總體思路很簡單,就是正則去匹配看是否有查詢字符串的出現,不過為了功能豐富點也就是隨手加上了支持自定義字符串的解析(有點雞肋),可選返回的是數組或者對象。具體處理可以見代碼:
/** * @method queryString * @param getObj 結果為對象否則為數組 * @default false * @param str 需要解析的string * @default location.search * @return Object or Array * */ function queryString(getObj,str){ var string = (str!== undefined) ? str : window.location.search; var result = string.match(new RegExp("[^\?\&]+=[^\?\&]+","g")); if(result == null){ result = ''; }else if(getObj){ var params = {}; for(var i = 0; i < result.length; i++){ var res = result[i].split('='); var key = res[0], value = res[1]; params[key] = value; } result = params; } return result; }
2、關於業務方的需求,用一句話來形容比較合適:天長地久有時盡,需求變動無絕期。可能你有時候說,后端tm不需要全部的查詢字符串他只要一個或者多個,反正就不要全部的。你給我個對象還是需要處理呀,能不能一步到位暴露獲取具體的某個key的值的方法。當然既然都抽出來了那就要有這個意識。
還是先說實現,其實與上面的思路也很類似只不過就是去匹配具體值了,然后返回字符串嘍 :具體見代碼
1 /** 2 * @method queryByKey 獲取指定key的值 3 * @param key 4 * @default null 5 * @return string 6 * */ 7 function queryByKey(key){ 8 var result = location.search.match(new RegExp(key+"=[^\?\&]+","g")); 9 var value = result?result[0].split('=')[1]:''; 10 return value; 11 }
3、此外在方法一的基礎上還可以新增一個方法,根據索引來獲取具體值:
1 /** 2 * @method queryByKey 獲取指定index的值 3 * @param index 4 * @default null 5 * @return string 6 * */ 7 function queryByIndex(index){ 8 var param = queryString()[index]; 9 var value = param ? param.split('=')[1] : '' 10 return value; 11 }
一句話拋磚引玉,希望有大牛來不吝賜教。有興趣的同學可以移步到https://github.com/xiaoxiangdaiyu/querystring-url
參考文章:http://www.cnblogs.com/sunnycoder/archive/2010/02/28/1674998.html