1. 程式人生 > >javascript url引數重構

javascript url引數重構

前端開發中經常會對url進行解析加以使用,在此整理下相關需求實現程式碼。
1. 提供url引數,也就是location.search的值如下:

var url = 'http://www.baidu.com?name=xiaohei&bir=1989&sex=men#abc';

2. 將引數解析成此種物件規格:
Object {name: "xiaohei", bir: "1989", sex: "men"}

相應的函式編寫以及呼叫如下:

function  analyseUrl(url){
    var obj = {},
        arr = [];
    if
(url.indexOf('?') != -1){ var opt = url.split('?'); var str = opt[1]; arr = str.split('&'); var arrLast = arr[arr.length - 1]; if(arrLast.indexOf('#') != -1){ arr[arr.length - 1] = arrLast.substr(0, arrLast.indexOf('#')); } for
(var i = 0; i < arr.length; ++i){ var para = arr[i].split('='); obj[para[0]] = para[1]; } } return obj; } var paraObj = analyseUrl(url);

返回的物件即包含url引數名和對應的引數值,如果僅僅是需要引數資料使用於編碼中,那麼這個物件內容可以滿足對引數的使用需求。
3. 如果需要重構url,需求如對相關引數進行重新賦值,則新增以下步驟:

  • 提供引數對照對映表
    var paraList = {"name" : "dahei", "age" : "12", "bir" : "1989"};

  • 對返回的物件進行引數值重構

for(var j in paraList){
    paraObj[j] = paraList[j];
}
  • 重新拼接url引數字串
var newPara = '';
for(var k in paraObj){
    newPara += k + '=' + paraObj[k] + '&';
}
newPara = newPara.substr(0, newPara.length - 1);

至此,便可以構造如下url引數newPara:
name=dahei&bir=1989&sex=men&age=12