当我们想要解析当前页面的url时,可以使用window.location
中提供的各种方法,比如一个页面的地址是这样的:
http://www.xiabingbao.com:80/javascript/2015/11/28/javascript-a-parse-url/?from=google&v=1.2#hash
那么我们在当前页面下的js里,就可以这样获取url中的各个部分:
- window.location.href : 整个完整的url
- window.location.protocol : url的协议(http:或https:等),当前例子返回 http:
- window.location.host : url的主机地址,当前例子返回 www.xiabingbao.com
- window.location.port : url的端口号,若采用默认的80端口(即使手动添加),则返回空字符串,当前例子返回 ""
- window.location.pathname : url的路径部分,当前例子返回 /javascript/2015/11/28/javascript-a-parse-url/
- window.location.search : url的查询参数部分(返回带有问号),当前例子返回 ?from=google&v=1.2
- window.location.hash : url的锚点部分,当前例子返回 #hash
但是,如果分析的不是当前页面的地址,而是一个变量中的值,那我们应该怎么办呢?这里我们可以借助a标签来实现解析url的功能。
// 创建一个额外的a标签
function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':',''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
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];
}
return ret;
})(),
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('/')
};
}
使用方式:
var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
myURL.file; // 'index.html'
myURL.hash; // 'top'
myURL.host; // 'abc.com'
myURL.query; // '?id=255&m=hello'
myURL.params; // Object = { id: 255, m: hello }
myURL.path; // '/dir/index.html'
myURL.segments; // Array = ['dir', 'index.html']
myURL.port; // '8080'
myURL.protocol; // 'http'
myURL.source; // 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'
获取到的数据与window.location的数据格式很像。从源代码中可以看出,通过DOM来解析url的原理是:首先,创建a(链接)对象,通过把参数url赋值给a的href属性,然后,通过操作a元素的DOM属性,进一步获取链接的更多信息。在这当中,也使用正则表达式来辅助获取各项值。