Решение относительных ссылок к URL

Конструктор URL() или статический метод URL.parse() API URL могут быть использованы для преобразования относительной ссылки и базового URL в абсолютный URL.

Оба метода принимают до двух строковых аргументов и возвращают объект URL(), представляющий абсолютный URL. Первый аргумент представляет собой либо абсолютный URL, либо относительную ссылку на URL, а второй — базовый URL, используемый для преобразования относительной ссылки, если таковая указана в первом аргументе. Методы преобразуют относительную ссылку одинаково, за исключением того, что конструктор URL() выбрасывает исключение, если переданы недопустимые URL, в то время как parse() возвращает null.

Ниже представлен код, демонстрирующий использование этих методов с теми же значениями URL url и base.

const url = "articles";
const base = "https://developer.mozilla.org/some/path";
const constructorResult = new URL(url, base);
// => https://developer.mozilla.org/some/articles
const parseResult = URL.parse(url, base);
// => https://developer.mozilla.org/some/articles

Как видно из примера, преобразование URL из предоставленного базового URL и относительной ссылки не сводится к простому конкатенации предоставленных параметров.

В данном случае передаётся путь, относительный к текущей директории (articles). Текущая директория URL base — это строка URL до последнего слэша. В данном случае https://developer.mozilla.org/some/path не имеет заключительного слэша, поэтому текущая директория — https://developer.mozilla.org/some/, и, следовательно, итоговый URL — https://developer.mozilla.org/some/articles.

Относительные ссылки преобразуются относительно базового URL, используя путь, который является относительным к: текущей директории (./), родительской директории текущей директории (../), или корню сайта (/). В следующих разделах показано, как происходит преобразование для каждого типа относительного пути.

Относительная ссылка, начинающаяся с ./ или без префикса, например ./article, article, или ./article/, относительна к текущей директории URL, представленного аргументом base.

Текущая директория URL base — это строка URL до последнего слэша, которая составляет https://test.example.org/api/ для обеих строк base в блоке кода ниже. Относительная ссылка к текущей директории article добавляется к этому, что даёт https://test.example.org/api/article

log(new URL("./article", "https://test.example.org/api/").href);
// => https://test.example.org/api/article
log(new URL("article", "https://test.example.org/api/v1").href);
// => https://test.example.org/api/article

Аналогично, ниже оба базовых URL имеют текущую директорию https://test.example.org/api/v2/. Мы добавляем story/ и story к ним, чтобы получить итоговый URL.

log(new URL("./story/", "https://test.example.org/api/v2/").href);
// => https://test.example.org/api/v2/story/
log(new URL("./story", "https://test.example.org/api/v2/v3").href);
// => https://test.example.org/api/v2/story

Относительная ссылка, начинающаяся с ../, например ../path, относительна к родительской директории текущей директории URL, представленного аргументом base. Каждый ../ удаляет папку из текущей директории, а затем любой текст после ../ добавляется к оставшейся части базового пути. Можно перемещаться вверх по родительским директориям, указывая ../ несколько раз, но только до уровня корня сайта.

Например, при базовом URL https://test.example.com/test/api/v1/ и URL, относительном к родительской директории, ../some/path, текущая директория — https://test.example.com/test/api/v1/, родительская директория — https://test.example.com/test/api/, а преобразованный абсолютный URL — https://test.example.com/test/api/some/path.

Следующие примеры демонстрируют это более подробно. Во всех случаях текущая директория — https://test.example.org/api/v1/v2/ (во втором случае v3 находится после последнего слэша), и каждая относительная ссылка преобразуется в другой родительский каталог.

log(new URL("../path", "https://test.example.org/api/v1/v2/").href);
// => https://test.example.org/api/v1/path
log(new URL("../../path", "https://test.example.org/api/v1/v2/v3").href);
// => https://test.example.org/api/path
log(new URL("../../../../path", "https://test.example.org/api/v1/v2/").href);
// => https://test.example.org/path

Относительная ссылка, начинающаяся с /, например /path, относительна к корню сайта URL, указанного в аргументе base. Например, при базовом URL https://test.example.com/api/v1 преобразованный URL для ссылки, относительной к корню сайта, /some/path — https://test.example.com/some/path.

Ниже приведены ещё несколько примеров.

log(new URL("/some/path", "https://test.example.org/api/").href);
// => https://test.example.org/some/path
log(new URL("/", "https://test.example.org/api/v1/").href);
// => https://test.example.org/
log(new URL("/article", "https://example.com/api/v1/").href);
// => https://example.com/article

• RFC 3986 — Разрешение относительных ссылок, спецификация для разрешения базовых и относительных URL