javascript parseUrl函数,巧用DOM解析URLs

很多时候我们有从一个URL中提取域名，查询关键字，变量参数值等的需要，而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取。方法就在JS代码里先创建一个a标签然后将需要解析的URL赋值给a的href属性，然后就得到了一切我们想要的了。

   var a = document.createElement('a');     
   a.href = 'http://www.jeasyuicn.com/using-dom-analysis-urls.html';     
   console.log(a.host);

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

    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'

转载于:https://my.oschina.net/HuifengWang/blog/262567