Как рассчитать относительный URL-адрес с помощью стандартных API-интерфейсов браузера

Question

Стандартный объект URL может использоваться для вычисления абсолютного 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-интерфейсы браузера стандартизированный способ создания относительных URL-адресов?

Да, это так. Вы уже использовали его, URL

В качестве альтернативы, вы можете создать временный <a> -элемент и получить из него значения. Недавно созданный <a> -элемент или URL оба реализуют location, так что вы можете извлечь location -properties:

// 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; }

Answer 2

Я закончил тем, что сделал следующее.

const base = 'http://example.com/'
const absolute = 'http://example.com/foo/bar?quux=123'
const relative = ((temp) => {
  return absolute.startsWith(base) ? temp.pathname.concat(temp.search) : temp.href
})(new URL(absolute, base))
console.assert(relative === '/foo/bar?quux=123')