一个非常全面的 Javascript URL 解析函数和分段 URL 解析方法

JavaScript经常被用于处理URL。这个URL解析函数能够完整、彻底地解析一个 URL 字符串，使得开发人员可以轻松地获取任何 URL。

URL 解析函数

使用以下函数来解析一个 URL：

function parseURL(url) {
  var parser = document.createElement('a'),
      searchObject = {},
      queries, split, i;
  // 解析 URL 并获取所有组件
  parser.href = url;
  // 获取 searchObject，将查询字符串中的参数作为一个对象来存储
  queries = parser.search.replace(/^\?/, '').split('&');
  for( i = 0; i < queries.length; i++ ) {
    split = queries[i].split('=');
    searchObject[split[0]] = decodeURIComponent(split[1]);
  }
  // 将 URL 组成部分分解成对象并将查询字符串存储
  return {
    protocol: parser.protocol,
    host: parser.host,
    hostname: parser.hostname,
    port: parser.port,
    pathname: parser.pathname,
    search: parser.search,
    searchObject: searchObject,
    hash: parser.hash
  };
}

以上函数会返回一个包含以下项的对象：

• protocol: 协议，包括 http、https、ftp 等
• host: 站点名称（域名）及端口号
• hostname: 站点名称（域名）
• port: 端口号
• pathname: 虚拟目录或文件
• search: 请求参数
• searchObject: 以对象形式存储的请求参数
• hash: 页面锚点

您可以传递一个URL给上述函数，并将返回的对象存储到一个变量中，然后就可以使用这个对象的属性来访问URL的各个组成部分。

URL 分段解析

以下代码演示了如何将 URL 分解成小的部分：

var url = "http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument";
var regex = /^(\w+)\:\/\/([^\/:]+)(?::(\d+))?(.*)$/;
var parts = url.match(regex);
var protocol = parts[1];
var hostname = parts[2];
var port = parts[3] || "80";
var path = parts[4];
// 解析查询字符串
var queryStart = path.indexOf("?");
var hashStart = path.indexOf("#");
var query = (queryStart != -1) ? path.substring(queryStart+1, hashStart != -1 ? hashStart : path.length) : "";
var hash = (hashStart != -1) ? path.substring(hashStart) : "";
path = (queryStart != -1) ? path.substring(0, queryStart) : path.substring(0, hashStart);

console.log(protocol);      // 输出 "http"
console.log(hostname);      // 输出 "www.example.com"
console.log(port);          // 输出 "80"
console.log(path);          // 输出 "/path/to/myfile.html"
console.log(query);         // 输出 "key1=value1&key2=value2"
console.log(hash);          // 输出 "#SomewhereInTheDocument"

上述代码分解了以下URL各个部分：

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
|____|    |_______________________|   |_________________________|  |_____________________|
protocol           hostname:port              path                             hash

其中，我们使用了正则表达式和字符串函数来分解URL。此外，我们使用了 || 运算符来设置默认端口号。