javascript - 如何使用标准浏览器 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

Do the browser APIs provide a standardised way for constructing relative URLs?

是的，他们确实如此。您已经使用过它，URL

或者，您可以创建临时 <a> -element 并从中获取值。新创建的<a> -元素或URL两者均实现location ，这样你就可以提取 location -属性:

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

// using URL
const url = new URL(absolute);
console.log(`Absolute from url: ${url.href}`);
console.log(`Relative from url: ${url.pathname}${url.search}`);

// using URL with a different base path
const baseOther = `http://somewhere.eu`;
const urlOther = new URL(`${url.pathname}${url.search}`, baseOther );
console.log(`Absolute from urlOther: ${urlOther.href}`);
console.log(`Relative from urlOther: ${urlOther.pathname}${urlOther.search}`);

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