URL parser: разбор адресов веб-страниц

Введение

URL (Uniform Resource Locator) — это адрес ресурса в интернете. Каждый раз, когда вы открываете сайт, отправляете ссылку или настраиваете редирект, вы работаете с URL. Понимание структуры адреса помогает разработчикам правильно маршрутизировать запросы, извлекать параметры, строить аналитику и обеспечивать безопасность. Несмотря на то что URL выглядит как простая строка, внутри него скрыто несколько отдельных компонентов, каждый из которых имеет своё назначение и правила кодирования.

В этой статье мы разберём анатомию URL, изучим все его компоненты — protocol, host, port, path, query, fragment — и научимся разбирать адреса как вручную, так и с помощью стандартных API браузера и популярных библиотек. В конце вы найдёте практические примеры парсинга и распространённые ошибки.

Структура URL

Полный URL состоит из нескольких частей, каждая из которых несёт определённую语义тическую нагрузку. Рассмотрим пример:

https://user:pass@www.example.com:8443/blog/post?id=42&sort=desc#comments

│        │      │   │         │    │              │              │
│        │      │   │         │    │              │              └── fragment
│        │      │   │         │    │              └── query string
│        │      │   │         │    └── path
│        │      │   │         └── port
│        │      │   └── host
│        │      └── password (опционально)
│        └── username (опционально)
└── scheme / protocol

Компоненты URL и их назначение

Компонент	Пример	Описание
scheme / protocol	`https`	Протокол доступа: http, https, ftp, ws, mailto и др.
authority	`user:pass@host:port`	Учётные данные, домен и порт
host	`www.example.com`	Доменное имя или IP-адрес сервера
port	`8443`	Номер порта; если опущен — используется стандартный для протокола
path	`/blog/post`	Путь к ресурсу на сервере
query	`?id=42&sort=desc`	Параметры запроса в виде ключ=значение
fragment	`#comments`	Якорь внутри страницы; на сервер не передаётся

Подробно о каждом компоненте

Protocol (scheme)

Scheme определяет протокол, по которому браузер обращается к серверу. Самые распространённые варианты: http (незашифрованный), https (зашифрованный через TLS), ftp (передача файлов), ws/wss (WebSocket), mailto (электронная почта),tel (телефонный звонок), file (локальный файл). Scheme нечувствителен к регистру, но традиционно пишется в нижнем регистре.

Host и порт

Host — это доменное имя (например, example.com) или IP-адрес сервера. Поддомены разделяются точками: api.v2.example.com. Порт указывается через двоеточие после хоста. Для http по умолчанию используется порт 80, для https — 443; если порт стандартный, его обычно опускают.

Path

Path — это путь к ресурсу, разделённый слешами. В REST-архитектуре путь обычно отражает иерархию ресурсов:/api/v1/users/42/orders означает «заказы пользователя 42 в API версии 1». Path чувствителен к регистру на большинстве серверов, хотя это зависит от файловой системы.

Query string

Query string начинается с символа ? и содержит пары «ключ=значение», разделённые символом&. Этот компонент используется для передачи параметров поиска, фильтров, пагинации, токенов отслеживания. Специальные символы в значениях должны быть закодированы percent-encoding.

?search=hello%20world&page=2&sort=-date

%20 — пробел
%2F — слеш /
%3F — вопрос ?
%26 — амперсанд &
%3D — равно =

Fragment

Fragment начинается с # и указывает на конкретный фрагмент страницы. Браузер прокручивает страницу к элементу с соответствующим id. Важно: fragment не передаётся на сервер, он обрабатывается только браузером. Это свойство используется в SPA-маршрутизации для переключения состояний без перезагрузки страницы.

Парсинг URL в JavaScript

Современные браузеры предоставляют встроенный API URL, который разбирает адрес на компоненты без необходимости писать регулярные выражения:

const url = new URL('https://www.example.com:8443/blog/post?id=42&sort=desc#comments');

url.protocol;   // "https:"
url.username;   // ""
url.password;   // ""
url.host;       // "www.example.com:8443"
url.hostname;   // "www.example.com"
url.port;       // "8443"
url.pathname;   // "/blog/post"
url.search;     // "?id=42&sort=desc"
url.hash;       // "#comments"
url.origin;     // "https://www.example.com:8443"

// Работа с query-параметрами
url.searchParams.get('id');      // "42"
url.searchParams.get('sort');    // "desc"
url.searchParams.has('page');    // false
url.searchParams.append('page', '2');
url.searchParams.toString();     // "id=42&sort=desc&page=2"

Класс URLSearchParams особенно удобен — он автоматически кодирует значения при записи и декодирует при чтении. Это избавляет от ручной работы с encodeURIComponent иdecodeURIComponent.

Кодирование символов в URL

URL может содержать только ограниченный набор символов: буквы латиницы, цифры, дефис, нижнее подчёркивание, точку и тильду. Все остальные символы (пробелы, кириллица, спецсимволы) должны быть percent-encoded.

// Кодирование
encodeURIComponent('привет мир');  // "%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82%20%D0%BC%D0%B8%D1%80"
encodeURIComponent('a/b?c=d&e');    // "a%2Fb%3Fc%3Dd%26e"

// Декодирование
decodeURIComponent('%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82'); // "привет"

// encodeURI кодирует URL целиком, не трогая разделители
encodeURI('https://example.com/путь?query=значение');
// "https://example.com/%D0%BF%D1%83%D1%82%D1%8C?query=%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5"

Важно различать encodeURI (для всего URL) и encodeURIComponent (для отдельных параметров). Первый не кодирует разделители :/?&=, второй — кодирует всё, что не относится к «безопасным» символам.

Распространённые задачи парсинга

Извлечение домена верхнего уровня

function getTLD(url) {
  const host = new URL(url).hostname;
  const parts = host.split('.');
  return parts.slice(-2).join('.');
}

getTLD('https://api.v2.example.com');   // "example.com"
getTLD('https://sub.example.co.uk');    // "co.uk" (без учёта public suffix)

Сборка URL из компонентов

const base = 'https://api.example.com/v1';
const params = new URLSearchParams({
  q: 'ноутбук',
  limit: '20',
  offset: '40',
});
const url = `${base}/search?${params}`;
// "https://api.example.com/v1/search?q=%D0%BD%D0%BE%D1%83%D1%82%D0%B1%D1%83%D0%BA&limit=20&offset=40"

Относительные и абсолютные URL

Конструктор URL умеет разрешать относительные адреса относительно базового URL:

new URL('/about', 'https://example.com').href;
// "https://example.com/about"

new URL('../images/logo.png', 'https://example.com/blog/post/').href;
// "https://example.com/blog/images/logo.png"

Безопасность при работе с URL

Валидация scheme — принимайте только http и https, иначе возможен редирект на javascript: или data: с XSS-атакой.
Проверка host — для защиты от open redirect сверяйте домен с белым списком.
Не храните секреты в query — параметры URL попадают в логи серверов, историю браузера и HTTP-заголовок Referer.
Экранируйте вывод — при вставке URL в HTML всегда экранируйте & как&, иначе &copy в адресе превратится в символ авторского права.
Учитывайте length limit — старые браузеры и серверы могут обрезать URL длиннее 2000 символов; для больших данных используйте POST.

URL и SEO: что важно знать

Поисковые системы, в том числе Яндекс и Google, уделяют внимание структуре URL при ранжировании. Чистые, читаемые адреса (так называемые SEO-friendly URLs) получают преимущество: они легче индексируются, чаще кликаются в выдаче и лучше запоминаются пользователями.

Короткие и описательные пути: /blog/url-parser-guide/ лучше, чем/index.php?p=123&cat=5.
Кириллица в URL: технически допустима через punycode для домена и percent-encoding для пути, но для совместимости лучше использовать транслитерацию.
Стабильность адресов: при смене URL обязательно настраивайте 301-редирект со старого адреса, иначе теряется накопленный «вес» страницы.
Один адрес — один контент: при дублировании страниц (например, с/без слеша, с/без www) используйте canonical, чтобы указать основную версию.
Параметры для отслеживания: utm-метки и session-id не должны попадать в индекс — настройте правила в robots.txt и Яндекс.Вебмастере.

Подробнее о кодировании спецсимволов в URL и работе с percent-encoding см. в нашей статье про URL-кодирование. А для быстрого разбора адреса используйтеURL parser.

Заключение

URL — это не просто строка, а структурированный адрес с чётко определёнными компонентами. Умение разбирать и собирать URL, корректно кодировать спецсимволы и извлекать параметры — обязательный навык для веб-разработчика. Современный API URL и URLSearchParams решает большинство рутинных задач, поэтому писать собственные парсеры на регулярных выражениях почти никогда не нужно.

Чтобы быстро разобрать адрес и посмотреть все его компоненты, используйте нашURL parser — он мгновенно показывает protocol, host, port, path, query и fragment, а также позволяет редактировать отдельные части и видеть результат в реальном времени.