Web 端 URL 的处理

Web 端 URL 的处理

URL 的处理

很多时候我们需要从一个URL中提取域名，查询关键字，变量参数值等的数据， 有两种方式，一种是利用window.location 上提供的方式；另一种，是利用 a 链接 dom 节点提供的方法：
先来认识一些 URL :
URL :统一资源定位符( Uniform Resource Location )
完整的URL 由这几个部分构成：scheme://host:port/path?query#fragment

scheme = 通信协议 （常见的 http ,ftp 等）；
host = 主机（域名或IP）;
port = 端口号；
path = 路径
query = 查询字符串
fragment = 信息片段 （锚点）
### 如何获得这些呢？ 举一个url 例子：
// http://www.jb51.net:80/seo/?ver=1.0&id=6#imhere
1、 window.location.href 获得整个URL 字符串 （浏览器上的地址栏）
2、window.location.protocol 协议部分 返回值为 http:
3、window.location.host url 的主机部分 www.jb51.net
4、window.location.port url 的端口部分 80 （默认返回空字符）
5、window.location.pathname url 的路径部分（文件地址） /seo/
6、window.location.search 查询字符串 本例返回: ?ver=1.0&id=6
7、window.location.hash 锚点 #imhere

上面就是对一个路径的基本解析。

### 利用这一原理，稍微扩展一下，就得到了一个更加健壮的解析URL各部分的通用方法了
写入如下：

function parseURL( url ) {        // 创建a 标签，利用a 标签的一些属性，完成路由信息提取        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 obj = {},                seg = a.search.replace(/^\?/,'').split('&'),                len = seg.length,i=0,s;                for( ; i<len; i++){                    if(!seg[i]) { continue ; }                    s = seg[i].split('=');                    obj[s[0]] = s[1];                }                    return obj;                })(),        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’