利用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 }