快捷導(dǎo)航

從URL中提取參數(shù)與將對(duì)象轉(zhuǎn)換為URL查詢參數(shù)的實(shí)現(xiàn)代碼

更新時(shí)間：2012年01月12日 21:22:34 作者：

這兩種主要是對(duì)《Prototype淺析》先前略過(guò)的Sring部分中toQueryParams和Object部分的toQueryString方法的補(bǔ)充

一、從URL中提取參數(shù)

有下列字符串：

var linkURL = 'http://localhost:8080/String/string_6.html?昵稱=小西山子&age=24#id1';
對(duì)于一個(gè)真實(shí)的URL地址，可以用js來(lái)讀取location中的相關(guān)信息來(lái)獲得某些信息，下面列舉一些：

復(fù)制代碼代碼如下:

 
location.origin : http://localhost【域】 
location.pathname : /project_js/Javascript/js_basic/demo/String/string_6.html【URL路徑】 
location.host : localhost【主機(jī)+端口】 
location.hostname : localhost【主機(jī)名】 
location.port :【端口】 
location.search : ?name=xesam【查詢字符串】 
location.hash : #age【錨點(diǎn)】 
location.href : http://localhost/project_js/Javascript/js_basic/demo/String/string_6.html?name=xesam#age【完整形式】 
location.protocol : http【協(xié)議】 

其中，與從URL中提取參數(shù)主要是用到location.search。不過(guò)為了通用，我們不去讀取location.search，直接處理字符串。

提取字符串查詢字符串之后，轉(zhuǎn)化為對(duì)象的形式。

先討論幾種查詢字符串的情況：

（1）?昵稱=小西山子&age=24#id1 -->{昵稱:'小西山子',age:'24'}

（2）?昵稱&age=24#id1'; -->{昵稱:undefined,age:'24'}

（3）?=小西山子&age=24#id1 -->{age:'24'}

（4）?昵稱=小西山子=又一個(gè)&age=24&age=24#id1 -->{昵稱:'小西山子=又一個(gè)',age:['24','24']}

復(fù)制代碼代碼如下:

 
function toQueryParams(){ 
var search = this.replace(/^\s+/,'').replace(/\s+$/,'').match(/([^?#]*)(#.*)?$/);//提取location.search中'?'后面的部分 
if(!search){ 
return {}; 
} 
var searchStr = search[1]; 
var searchHash = searchStr.split('&'); 

var ret = {}; 
for(var i = 0, len = searchHash.length; i < len; i++){ //這里可以調(diào)用each方法 
var pair = searchHash[i]; 
if((pair = pair.split('='))[0]){ 
var key = decodeURIComponent(pair.shift()); 
var value = pair.length > 1 ? pair.join('=') : pair[0]; 
console.log() 
if(value != undefined){ 
value = decodeURIComponent(value); 
} 
if(key in ret){ 
if(ret[key].constructor != Array){ 
ret[key] = [ret[key]]; 
} 
ret[key].push(value); 
}else{ 
ret[key] = value; 
} 
} 
} 
return ret; 
} 
console.dir(toQueryParams.call(linkURL)); 

上面基本就是Prototype中toQueryParams的實(shí)現(xiàn)，上面又一個(gè)步驟是用'='分割參數(shù)，然后在value中再拼接。另外可以用substring來(lái)實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

 
function toQueryParams(){ 
var search = this.replace(/^\s+/,'').replace(/\s+$/,'').match(/([^?#]*)(#.*)?$/); 
if(!search){ 
return {}; 
} 
var searchStr = search[1]; 
var searchHash = searchStr.split('&'); 

var ret = {}; 
searchHash.forEach(function(pair){ 
var temp = ''; 
if(temp = (pair.split('=',1))[0]){ 
var key = decodeURIComponent(temp); 
var value = pair.substring(key.length + 1); 
if(value != undefined){ 
value = decodeURIComponent(value); 
} 
if(key in ret){ 
if(ret[key].constructor != Array){ 
ret[key] = [ret[key]]; 
} 
ret[key].push(value); 
}else{ 
ret[key] = value; 
} 
} 
}); 
return ret; 
} 
console.dir(toQueryParams.call(linkURL)); 

一、對(duì)象轉(zhuǎn)換為URL查詢參數(shù)

對(duì)象轉(zhuǎn)換為URL查詢參數(shù)就麻煩一點(diǎn)。不過(guò)由于是轉(zhuǎn)換成查詢參數(shù)形式，因此只能處理單層嵌套的對(duì)象，子對(duì)象就不能處理了。其原理就是toQueryParams的反向操作。

復(fù)制代碼代碼如下:

 
function toQueryPair(key, value) { 
if (typeof value == 'undefined'){ 
return key; 
} 
return key + '=' + encodeURIComponent(value === null ? '' : String(value)); 
} 
function toQueryString(obj) { 
var ret = []; 
for(var key in obj){ 
key = encodeURIComponent(key); 
var values = obj[key]; 
if(values && values.constructor == Array){//數(shù)組 
var queryValues = []; 
for (var i = 0, len = values.length, value; i < len; i++) { 
value = values[i]; 
queryValues.push(toQueryPair(key, value)); 
} 
ret = ret.concat(queryValues); 
}else{ //字符串 
ret.push(toQueryPair(key, values)); 
} 
} 
return ret.join('&'); 
} 
console.log(toQueryString({ 
name : 'xesam', 
age : 24 
})); //name=xesam&age=24 
console.log(toQueryString({ 
name : 'xesam', 
age : [24,25,26] 
})); //name=xesam&age=24&age=25&age=26 