js如何解析url

JavaScript017

js如何解析url,第1张

你要解析出什么东西?

反正所有的东西都在window.location 对象里面:

location.host 返回主机和端口号

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口 (80 或 443)

location.protocol 返回所使用的 web 协议(http:// 或 https://)

location.hash  返回锚(#后面)

location.href 返回完整的url

location.search 返回参数部分(?后面)

其他的东西比如获取参数值什么的用正则就行了,一个方法搞定:

window.getParam = function (name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")

    var r = window.location.search.substring(1).match(reg)

    return r ? decodeURI(r[2]) : null

}

很多时候我们有从一个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<leni++) {

               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'