解析url

/**

• 解析一个url，并生成window.location对象包含的域
• location:
• {

•  href: '包含完整的url',
  

•  origin: '包含协议到pathname之前的内容',
  

•  protocol: 'url使用的协议，包含末尾的:',
  

•  username: '用户名', // 暂时不支持
  

•  password: '密码',  // 暂时不支持
  

•  host: '完整主机名，包含:和端口',
  

•  hostname: '主机名，不包含端口'
  

•  port: '端口号',
  

•  pathname: '服务器上访问资源的路径/开头',
  

•  search: 'query string，?开头',
  

•  hash: '#开头的fragment identifier'
  

• }
• @param {string} url 需要解析的url
• @return {Object} 包含url信息的对象 */

方案一

function parseUrl(url) {
  var result = {};
  var keys = [
    "href",
    "origin",
    "protocol",
    "host",
    "hostname",
    "port",
    "pathname",
    "search",
    "hash",
  ];
  var i, len;
  var regexp = /(([^:]+:)\/\/(([^:\/\?#]+)(:\d+)?))(\/[^?#]*)?(\?[^#]*)?(#.*)?/;

  var match = regexp.exec(url);
  console.info("match=", match);

  if (match) {
    for (i = keys.length - 1; i >= 0; --i) {
      result[keys[i]] = match[i] ? match[i] : "";
    }
  }
  console.info("result=", result);
  return result;
}

方案二

function parseURL(url) {
  //创建一个 a 标签，并将 url 赋值给标签的 href 属性。
  const a = document.createElement("a");
  a.href = url;
  return {
    source: url,
    protocol: a.protocol.replace(":", ""), // 协议
    host: a.hostname, // 主机名称
    port: a.port, // 端口号
    query: a.search, // 查询字符串
    params: (function () {
      // 查询参数
      let ret = {},
        seg = a.search.replace(/^\?/, "").split("&"),
        len = seg.length,
        i = 0,
        s;
      for (; i < len; i++) {
        if (!seg[i]) {
          continue;
        }
        s = seg[i].split("=");
        ret[s[0]] = decodeURIComponent(s[1]);
      }
      return ret;
    })(),
    file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ""])[1], // 文件名
    hash: a.hash.replace("#", ""), // 哈希参数
    path: a.pathname.replace(/^([^\/])/, "/$1"), // 路径
    relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ""])[1], // 相对路径
    segments: a.pathname.replace(/^\//, "").split("/"), // 路径片段
  };
}

parseUrl("http://test.com:8080?name=1&password=2#page1");