实现 simplifyUrl

2020-05-26

面试时候的一道题，当时用的是a.pathname.split('/') + 队列来实现，后来觉得createElement('a')有环境依赖而且需要加入很多协议、端口的判断，于是重新写了一版

原题

JS、CSS等静态资源路径，允许出现 “..”、”.” 、 “//“，请简化这些资源路径，把它们变成最短字符串。
注：一个点（.）表示当前目录本身；此外，两个点（..）表示将目录切换到上一级（指向父目录）；两者都可以是复杂相对路径的组成部分。

示例1：//s3.pstatp.com/eesz/.././resource/./bear/js//app.0fa757caa42b59caf8f0.js
结果：//s3.pstatp.com/resource/bear/js/app.0fa757caa42b59caf8f0.js

示例3：/eesz/.././resource/./bear/js//app.0fa757caa42b59caf8f0.js
结果：/resource/bear/js/app.0fa757caa42b59caf8f0.js

示例4：../eesz/aaa../b.b..b../dsds/../app.0fa757caa42b59caf8f0.js
结果：../eesz/aaa../b.b..b../app.0fa757caa42b59caf8f0.js

source code

const simplifyUrl = function (url) {
  while (true) {
    if (/[\d\w\.]\/\.\.\//.test(url)) {
      url = url.replace(/[^\/]+\/\.\.\//, "");
    } else if (/\/\.\//.test(url)) {
      url = url.replace(/\/\.\//, "/");
    } else if (/[^^:]\/\//.test(url)) {
      //这里用断言不知道为啥不能匹配
      url = url.replace(/([^^:])\/\//, "$1/");
    } else {
      break;
    }
  }

  return url;
};

test cases

test("test1", () => {
  expect(
    simplifyUrl(
      "//s3.pstatp.com/eesz/.././resource/./bear/js//app.0fa757caa42b59caf8f0.js"
    )
  ).toEqual("//s3.pstatp.com/resource/bear/js/app.0fa757caa42b59caf8f0.js");
});

test("test2", () => {
  expect(
    simplifyUrl(
      "http://s3.pstatp.com/eesz/.././resource/./bear/js//app.0fa757caa42b59caf8f0.js"
    )
  ).toEqual(
    "http://s3.pstatp.com/resource/bear/js/app.0fa757caa42b59caf8f0.js"
  );
});

test("test3", () => {
  expect(
    simplifyUrl("/eesz/.././resource/./bear/js//app.0fa757caa42b59caf8f0.js")
  ).toEqual("/resource/bear/js/app.0fa757caa42b59caf8f0.js");
});

test("test4", () => {
  expect(
    simplifyUrl("../eesz/aaa../b.b..b../dsds/../app.0fa757caa42b59caf8f0.js")
  ).toEqual("../eesz/aaa../b.b..b../app.0fa757caa42b59caf8f0.js");
});