利用a标签自动解析URL分析网址实例
对于window.location，我们比较熟悉，它有protocol，hostname，host，port，search，hash，href，pathname等属性，a标签也和window.location一样，也有这样属性，这样可以方便我们分析网址，闲话少说，上代码。
functionparseURL(url){
vara=document.createElement('a');
a.href=url;
return{
source:url,
protocol:a.protocol.replace(':',''),
host:a.hostname,
port:a.port||'80',
query:a.search,
params:(function(){
varret={},
seg=a.search.replace(/^\?/,'').split('&'),
len=seg.length,i=0,s;
for(;i<len;i++){
if(!seg[i]){continue;}
s=seg[i].split('=');
ret[s[0]]=s[1];
}
returnret;
})(),
file:(a.pathname.match(/\/([^\/?#]+)$/i)||[,''])[1],
hash:a.hash.replace('#',''),
path:a.pathname.replace(/^([^\/])/,'/$1'),
relative:(a.href.match(/tps?:\/\/[^\/]+(.+)/)||[,''])[1],
segments:a.pathname.replace(/^\//,'').split('/')
};
}
测试地址
console.log(parseURL("http://www.w3school.com.cn/jsref/dom_obj_anchor.asp?type=2#id2"));
结果如下
{
file:"dom_obj_anchor.asp",
hash:"id2",
host:"www.w3school.com.cn",
params:{type:"2"},
path:"/jsref/dom_obj_anchor.asp",
port:"80",
protocol:"http",
query:"?type=2",
relative:"/jsref/dom_obj_anchor.asp?type=2#id2",
segments:[0:"jsref",1:"dom_obj_anchor.asp"],
source:http://www.w3school.com.cn/jsref/dom_obj_anchor.asp?type=2#id2
}