分类 JavaScript 下的文章

JS 快速解析 URL

这篇文章会告诉如何用JS快速的解析一个URL，得到协议(protocol)、域名(host)、端口(port)、查询字符串(query)等信息。

使用 <a> 元素或 URL 对象快速解析：

function parseURL(url) {

  var a = document.createElement('a');

  a.href = url;

  // var a = new URL(url);

  return {

    source: url,

    protocol: a.protocol.replace(':', ''), 

    host: a.hostname,

    port: a.port,

    query: a.search,

    params: (function() {

      var params = {},

          seg = a.search.replace(/^\?/, '').split('&'),

          len = seg.length,

          p;

      for (var i = 0; i < len; i++) {

        if (seg[i]) {

           p = seg[i].split('=');

           params[p[0]] = p[1];

        }

      }

      return params;

   })(),

   hash: a.hash.replace('#', ''),

   path: a.pathname.replace(/^([^\/])/, '/$1')

  };

}

console.log(parseURL('https://test.com:8080/path/index.html?name=angle&age=18#top'));

转载自：http://ghmagical.com/article/page/id/SgIVenH42dyN

JavaScript 获取地址栏 URL 相关信息汇总

下面以这个 URL 为例：

https://nowtime.cc/index.php?user=admin&passwd=admin

1. window.location.href 获取整个 URL 为字符串

$href = window.location.href;

console.log($href);//控制台 输出 https://nowtime.cc/index.php?user=admin&passwd=admin
alert($href);//返回 https://nowtime.cc/index.php?user=admin&passwd=admin

2. window.location.protocol 获取 URL 的协议部分

$protocol = window.location.protocol;

console.log($protocol );//控制台 输出 https:
alert($protocol );//返回 https:

3. window.location.host 获取 URL 的主机名部分

$host = window.location.host;

console.log($host);//控制台 输出 nowtime.cc
alert($host);//返回 nowtime.cc

4. window.location.port 取与 URL 关联的端口号码

$port = window.location.port;

console.log($port);
alert($port);

//返回：空字符(如果采用默认的80端口、添加了 :80)，那么返回值并不是默认的80而是空字符)

5. window.location.pathname 获取与 URL 的路径部分

$pathname = window.location.pathname;

console.log($pathname);//控制台 输出 index.php
alert($pathname);//返回 index.php

6. window.location.search 获取 href 属性中跟在问号后面的部分

$search = window.location.search;

console.log($search);//控制台 输出 ?user=admin&passwd=admin
alert($search);//返回 ?user=admin&passwd=admin

7. window.location.hash 获取 href 属性中在井号“#”后面的部分

$hash = window.location.hash;

console.log($hash);
alert($hash);

//返回：空字符串，因为 URL 中没有