Javascript解析URL

举个栗子,一个网页的URL为https://i.cnblogs.com/EditPosts.aspx?opt=1,要分离出通信协议、host、port、path、query、hash等值。这时候我们应该怎么做呢?

URL组成

URL : 统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成:scheme://host:port/path?query#fragment

scheme:通信协议;

host:主机(域名或者IP);

port:端口;

path:路径;

query:传递的参数,可以有多个值(各个值之间用&连起来);

fragment:hash值;

解析函数

   function parseURL(url) {
      let a = document.createElement('a');
      a.href = url;
      let ret = {};
      // 判断是否有传递参数,若有,则转换成key-value对象形式
      if (a.search) {
        let seg = a.search.replace('?', '').split('&');
        for (let i = 0, len = seg.length; i < len; i++) {
          let key = seg[i].split('=')[0];
          let value = seg[i].split('=')[1];
          ret[key] = value;
        }
      }
      return {
        source: url, // 原URL值
        protocol: a.protocol.replace(':', ''), // 通信协议
        port: a.port, // 端口
        host: a.hostname, // 主机(域名或IP)
        path: a.pathname, // 路径
        query: a.search, // 传递参数
        hash: a.hash.replace('#', ''), // 哈希值
        param: ret // 传递参数key-value对象
      }
    }

 

posted @ 2019-03-12 23:04  QiuXZ  阅读(569)  评论(1编辑  收藏  举报