Преобразование относительного пути в абсолютный: JavaScript

Быстрый ответ

Вы можете легко превратить относительные URL в абсолютные, используя конструкцию new URL(). Этот метод поддерживается современными браузерами. Как аргументы, предоставьте ему относительный путь и document.baseURI:

let absoluteURL = new URL(relativePath, document.baseURI).href;

Вышеуказанная команда моментально превращает относительные пути в полноценные абсолютные URL.

Разбираемся с URL API

URL API — это идеальный инструмент для работы с относительными и абсолютными URL в JavaScript. Он быстр и прост в использовании, а также автоматически обрабатывает пути, освобождая вас от необходимости делать это самостоятельно:

• Обработка специализированных символов: символы вроде . или .., символизирующие текущий или родительский каталоги, немедленно обрабатываются URL API.
• Устранение особенностей запросов: строка запроса или якоря в URL? URL API легко с ней справится.
• Управление протоколом: если ваш URL начинается с //, URL API без проблем определит правильный протокол.

Для выполнения конвертации достаточно указать относительный путь и базу:

let absolutePath = new URL('pics/puppy.jpg', 'http://cuteanimals.com/').href;
// Результат: 'http://cuteanimals.com/pics/puppy.jpg'

Теперь ваш URL готов к использованию!

В джунглях без URL API

Иногда, например в браузере, вам приходится самостоятельно выполнять преобразование пути. В таких случаях могут пригодиться следующие методы:

Функция absolutePath

Данная функция, написанная вами, с помощью операций со строками преобразует пути вида .. и .:

function absolutePath(base, relative) {
    var stack = base.split("/"),
        parts = relative.split("/");
    stack.pop(); // Удаляет последний элемент (считаем, что база — это каталог)

    for (var i = 0; i < parts.length; i++) {
        if (parts[i] === ".")
            continue;
        if (parts[i] === "..")
            stack.pop();
        else
            stack.push(parts[i]);
    }
    return stack.join("/");
}

Подробнее об этом расскажет наш спикер на видео

Использование document.baseURI

Свойство document.baseURI возвращает текущий базовый URL документа:

let dynamicAbsolutePath = absolutePath(document.baseURI, 'path/to/resource');

Защитите функцию от ошибок

Убедитесь, что функция способна корректно обрабатывать некорректные входные данные:

if (!validInput(basePath, relativePath)) {
    return null; // "К сожалению, навигации по этому адресу не существует."
}

Такой подход защищает от ошибок во время выполнения.

Визуализация

Посмотрим на наглядное представление процесса преобразования:

Относительный путь: 'coffee/shop.jpg'
Базовый URL: 'http://www.citymaps.com/downtown/'

После преобразования получим абсолютный путь:

+-----------------------------+     +----------------------------------------------+
| Базовый URL (Старт)         | --> | Абсолютный путь (Пункт назначения)           |
+-----------------------------+     +----------------------------------------------+
| http://www.citymaps.com/downtown/ |  http://www.citymaps.com/downtown/coffee/shop.jpg |

Мы используем JavaScript в качестве своего компаса для поиска направления:

let absolutePath = new URL(relativePath, baseURL).href;

Вы успешно определили путь!

За пределами кода

Работа с нетипичными протоколами

В средах без браузера обработка различных протоколов может требовать дополнительного внимания. Учтите это, чтобы избежать ошибок при работе с такими протоколами.

Учет окончательных слешей

Как правило, слеши в конце базового URL или относительных путей влияют на результат. Поэтому важно, чтобы ваша функция корректно обрабатывала эти случаи:

if (base.charAt(base.length – 1) !== '/') {
    base += '/';
}

Избыточные библиотеки

Исключите ненужные зависимости, предпочитая чистый JavaScript для достижения максимальной компактности кода.

Полезные ресурсы

1. <a>: ссылки в HTML — Информация о якорных тегах и создании ссылок.
2. API местоположения окна — Всё о том, как управлять URL с помощью свойства location.
3. Метод createElement() в DOM — Особенности создания элементов HTML в JavaScript.
4. Об относительных и абсолютных путях — Как относительные и абсолютные пути работают в веб-разработке.
5. Преобразование относительного URL в абсолютный — Обсуждение способов преобразования URL.
6. URI.js – работа с URL в JavaScript — Руководство по работе с URI.
7. Преобразование путей в JavaScript — Способы обработки относительных путей.