关键词

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

一个非常全面的 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: 协议,包括 httphttpsftp
  • 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。此外,我们使用了 || 运算符来设置默认端口号。

本文链接:http://task.lmcjl.com/news/10999.html

展开阅读全文