Извлечение протокола, домена и порта из URL в Java

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

Для извлечения информации о протоколе, домене и порте в JavaScript можно использовать объект URL:

const url = new URL('http://www.example.com:8080/path');
console.log(url.protocol); // Возвращает "http:"
console.log(url.hostname); // Возвращает "www.example.com"
console.log(url.port);     // Возвращает "8080"

С встроенными свойствами объекта URL вы эффективно получите необходимую информацию.

Правим расхождения в браузерах

Не все браузеры имеют одинаковую поддержку функционала. Например, у Internet Explorer отсутствует поддержка window.location.origin. Но мы найдем решение:

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

Таким образом, вы добьетесь совместимости с window.location.origin независимо от используемого браузера.

Работаем со строками запроса и параметрами

Теперь переходим к обработке строк запроса в URL:

const url = new URL('http://example.com:8080/path?query=value');

console.log(url.searchParams.get('query')); // Выведет "value"

Для обработки более сложных сценариев, вам на помощь придет searchParams:

let params = {};
for (let [key, value] of url.searchParams) {
  params[key] = value;
}

Таким образом, извлечение параметров становится простым и понятным.

Углубленный парсинг URL

Идем дальше и рассмотрим извлечение сегментов пути или создаём пользовательскую структуру URL:

const url = new URL('http://www.example.com:8080/dir/subdir/page?query=value');
console.log(url.pathname.split('/')); // Получится массив ["", "dir", "subdir", "page"]

Этот массив может пригодиться для работы со сегментами пути или при построении навигационного меню.

Использование API URL в Web Workers

Объект URL можно использовать в Web Workers, для анализа URL в фоновом режиме:

// Код в Web Worker
self.onmessage = function(event) {
  let url = new URL(event.data);
  postMessage(url.hostname);
};

API URL хорошо зарекомендовало себя при выполнении задач в контексте web workers.

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

Давайте визуализируем структуру URL, сравнив ее с домашним адресом:

У URL-адреса есть структура, аналогичная **домашнему адресу**:

- `Протокол` 🚗 – как **способ передвижения**
- `Домен` 🏠 – это **номер дома и улица**
- `Порт` 🚪 – это **особый вход или дверь**

Используя JavaScript для анализа URL:

const url = new URL('http://example.com:8080/path');

Мы извлекаем следующую информацию:

| Компонент      | Свойство в JavaScript | Пример            |
| -------------- | --------------------- | ----------------- |
| Протокол       | `url.protocol`        | `http:` 🚗       |
| Домен          | `url.hostname`        | `example.com` 🏠 |
| Порт           | `url.port`            | `8080` 🚪        |

Такой метод позволяет легко анализировать любой URL.

Полезные материалы

1. Window: location property – Web APIs | MDN – основной API для работы с местоположением окна в JavaScript.
2. URL – Web APIs | MDN – подробное руководство по использованию конструктора и свойств URL.
3. URL | Node.js v21.6.1 Documentation – документация Node.js по анализу и работе с URL.
4. JavaScript Window Location – интерактивное руководство по управлению местоположением окна браузера.
5. Tutorial | DigitalOcean – пошаговый туториал по правильному построению URL.