Javascript 如何将绝对url转换为相对url

如何将绝对url转换为相对url

将相对值转换为绝对值是很繁琐的

const rel=“../images/doggy.jpg”
常量基=”https://example.com/pages/page.html?foo=bar#baz";
函数reltoab（baseHref，relHref）{
const url=新的url（rel，base）；
返回`${url.origin}${url.pathname}`；
}
控制台日志（基本、相对）您可以使用内置的URL类来帮助解析URL。这样，您的代码就可以只关注单个路径元素，而忽略搜索参数、域、模式等

这是我想到的

删除公共目录
预编。。对于每个页面路径，我们需要向上移动才能到达最近的祖先目录
捕获这些文件位于同一目录中的边缘情况
我不保证这是完美或万无一失的，但希望它是接近的，让你更接近你所寻找的

函数路径部件（路径）{
设parts=path.split（'/'）；
让start=0；
let end=零件长度；
//从根部移除初始空白零件/
如果（！部件[0]）{
开始=1；
}
//拆下尾部/尾部零件
如果（！parts[parts.length-1]）{
结束-=1；
}
返回零件。切片（开始、结束）；
}
函数Absorel（pageHref，absHref）{
var pageUrl=新URL（pageHref）；
var absUrl=新URL（absHref）；
//如果URL具有不同的架构或域，则不可能是相对的
if（pageUrl.origin！==absUrl.origin）{
返回absHref；
}
var pagePath=pathParts（pageUrl.pathname）
var absPath=pathParts（absUrl.pathname）
//删除公共根路径
while（absPath.length&&pagePath[0]==absPath[0]）{
absPath.shift（）；
pagePath.shift（）；
}
//对于pagePath上剩余的每个路径段，我们需要一个相对的。。
pagePath.fill（“..”）；
让relPath=[
…页面路径，
…absPath
]。加入（“/”）；
//如果路径不需要向上遍历，请使用当前目录相对路径
if（relPath[0]！=='。）{
relPath='./'+relPath；
}
返回路径；
}
噢，如果搜索和散列在最终结果中很重要，只需将它们追加回最终的相对url即可
absUrl.search
和
absUrl.hash
2美分注意：从技术上讲，这样的相对URL可能有无限多。例如，
newurl（“/foo/。/bar/。/baz/。/index2.html”，baseURL）
将生成
[baseURL]/index2.html
。我想你想要的是最短的路。当然可以。然而，几乎每个path API都有这样的功能，没有人需要指出这一点。比如等等。。。