目录

在JavaScript中解析URL

本文介绍两种通过 JS 实现 URL 解析,分别是:通过创建链接标签实现 URL 解析 和 通过正则表达式来处理 URL

通过创建链接标签实现 url 解析

function parseUrl(url) {
  var anchor = document.createElement("a");
  anchor.href = url;
  var path = anchor.pathname,
    search = anchor.search,
    query = null;
  if (search) {
    var keyValue = search.replace(/^\?/, "").split("&"),
      tempValue;
    query = {};
    for (var i = 0, j = keyValue.length; i < j; i++) {
      tempValue = keyValue[i].split("=");
      query[tempValue[0]] = tempValue[1];
    }
  }
  var defaultPort = {
    "http:": 80,
    "https:": 443,
    "ftp:": 21,
    "gopher:": 70,
    "ws:": 80,
    wws: 443,
  };
  return {
    href: anchor.href, //full url
    protocol: anchor.protocol, //protocol,            eg: http:, https:, ftp:
    host: anchor.host, //host,                eg: www.lyblog.net:8087
    hostname: anchor.hostname, //hostname,            eg: www.lyblog.net
    path: path + search, //path and search,     eg: www.lyblog.net/archive/2015/566.html?debug=1
    port: anchor.port || defaultPort[anchor.protocol] || "", //port,                eg: 8087
    pathname: path, //path,                eg: /archive/2015/566.html
    hash: anchor.hash, //hash,                eg: #respond
    search: search, //search,              eg: ?search=1&debug=2
    query: query, //query                eg: JSON
  };
}

通过正则表达式来处理 URL

function parseUrl(href) {
  var match = href.match(
      /^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)(\/[^?#]*)(\?[^#]*|)(#.*|)$/
    ),
    query = null,
    keyValue,
    tplValue,
    defaultPort = {
      "http:": 80,
      "https:": 443,
      "ftp:": 21,
      "gopher:": 70,
      "ws:": 80,
      wws: 443,
    };
  if (match[6]) {
    keyValue = match[6].replace(/^\?/, "").split("&");
    query = {};
    for (var i = 0, j = keyValue.length; i < j; i++) {
      tplValue = keyValue[i].split("=");
      query[tplValue[0]] = tplValue[1];
    }
  }
  return (
    match && {
      href: href,
      protocol: match[1],
      host: match[2],
      hostname: match[3],
      port: match[4] || defaultPort[match[1]] || "",
      path: match[5] + match[6],
      pathname: match[5],
      search: match[6],
      hash: match[7],
      query: query,
    }
  );
}