Извлечение протокола, домена и порта из 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.
Полезные материалы
- Window: location property – Web APIs | MDN – основной API для работы с местоположением окна в JavaScript.
- URL – Web APIs | MDN – подробное руководство по использованию конструктора и свойств URL.
- URL | Node.js v21.6.1 Documentation – документация Node.js по анализу и работе с URL.
- JavaScript Window Location – интерактивное руководство по управлению местоположением окна браузера.
- Tutorial | DigitalOcean – пошаговый туториал по правильному построению URL.