bbsvs

js从url中提取参数的方法

作者:bbsvs 时间:2017-08-29

这篇文章主要是详细介绍js从url中提取参数的方法

字符串: 

var linkURL = 'http://localhost:8080/String/string_6.html?昵称=小西山子&age=24#id1';

对于一个真实的URL地址,可以用js来读取location中的相关信息来获得某些信息,下面列举一些: 


location.origin : http://localhost【域】 
location.pathname : /project_js/Javascript/js_basic/demo/String/string_6.html【URL路径】 
location.host : localhost【主机+端口】 
location.hostname : localhost【主机名】 
location.port :【端口】 
location.search : ?name=xesam【查询字符串】 
location.hash : #age【锚点】 
location.href : http://localhost/project_js/Javascript/js_basic/demo/String/string_6.html?name=xesam#age【完整形式】 
location.protocol : http【协议】


其中,与从URL中提取参数主要是用到location.search。不过为了通用,我们不去读取location.search,直接处理字符串。 


提取字符串查询字符串之后,转化为对象的形式。 


先讨论几种查询字符串的情况: 


(1)?昵称=小西山子&age=24#id1 -->{昵称:'小西山子',age:'24'} 


(2)?昵称&age=24#id1'; -->{昵称:undefined,age:'24'} 


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


(4)?昵称=小西山子=又一个&age=24&age=24#id1 -->{昵称:'小西山子=又一个',age:['24','24']} 


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++){ //这里可以调用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的实现,上面又一个步骤是用'='分割参数,然后在value中再拼接。另外可以用substring来实现: 


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));


TAG:
参数   url