我如何使用标准浏览器API计算相对URL

Question

标准URL object可用于如下从相对URL和基础URL计算绝对URL。

const base = 'http://example.com/'
const relative = '/foo/bar?quux=123'
const absolute = new URL(relative, base).href
console.assert(absolute === 'http://example.com/foo/bar?quux=123')

但是，我不知道如何使用URL对象执行相反操作。

const base = 'http://example.com/'
const absolute = 'http://example.com/foo/bar?quux=123'
const relative = '???'
console.assert(relative === '/foo/bar?quux=123')

浏览器API是否提供了构建相对URL的标准化方法，还是我需要使用第三方解决方案？

Answer 1

浏览器API是否提供了标准化的构造方法相对网址？

是，他们有。

创建一个临时<a>元素并从中获取值。或者（甚至更简单）从绝对路径创建一个新的URL。两者都实现location：

const absolute = 'http://example.com/foo/bar?quux=123';
const hrefTmp = document.createElement(`a`);
hrefTmp.href = absolute;
console.log(hrefTmp.pathname);
console.log(hrefTmp.search);
console.log(`relative from <a>: ${hrefTmp.pathname}${hrefTmp.search}`);

// or just create a new URL
const url = new URL(absolute);
console.log(`relative from url: ${url.pathname}${url.search}`)

.as-console-wrapper { top: 0; max-height: 100% !important; }