js 输出相对路径

var a = '/a/b/c/d/main.js';
var b = '/a/b/d/zhangjing/index.js';
var $path1 = '/home/web/lib/img/cache.php';
var $path2 = '/home/show.php';


function createRelativePath(basePath, targetPath) {

    let basePathArr = basePath.split('/');
    let targetPathArr = targetPath.split('/');
    let str = '';

    basePathArr.shift();
    targetPathArr.shift();
    let count = 0;
    for(let i = 0; i < targetPathArr.length; i++) {
        if(basePathArr[i] === targetPathArr[i]) {
            str = str + '../';
            count++;
        }
    }
    if(count === 1) {//只有一层的情况
        str = './'
    }

    targetPathArr.splice(0, count);//分割剩余层级
    
    targetPathArr.forEach((item, index) => {
        str = str + item + (index === targetPathArr.length-1 ? '' : '/')//末尾不加'/'
    })
    return str

}

console.log(createRelativePath(a, b));
console.log(createRelativePath($path1 , $path2));
console.log(createRelativePath($path2 , $path1));

思路：

1. 将字符串转成数组；
2. 通过for循环确定相同的层级，用一个全局变量去记录
3. 处理只有一层的情况
4. 通过刚才的记录的层级，将剩余的数组成员和全局申明的字符串的进行拼接
5. 返回字符串