1. 程式人生 > >一個不錯的解析URL地址的JS方法,推薦一下

一個不錯的解析URL地址的JS方法,推薦一下

出處:http://zhidao.baidu.com/link?url=sIJnAGvR4zkIU7PJCXY88e8r4oSl9YNhGScFgCV0XYPmJVUdseoHMeUFxFEKzoHltYE0jfS5Ahg24hMJNtVSNbcbjXXmgP6BkHgCoNWfHzi

很多時候我們有從一個URL中提取域名,查詢關鍵字,變數引數值等的需要,而萬萬沒想到可以讓瀏覽器方便地幫我們完成這一任務而不用我們寫正則去抓取。方法就在JS程式碼裡先建立一個a標籤然後將需要解析的URL賦值給a的href屬性,然後就得到了一切我們想要的了。

var a = document.createElement('a');  
a.href = 'htt p:/ /

www.jeasyuicn.com/using-dom-analysis-url s.h tml';  
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('htt p:/ /abc.com:8080/dir/inde x.h tml?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;   // = 'htt p:/ /abc.com:8080/dir/index.h tml?id=255&m=hello#top'