URL: структура, разбор и парсинг для разработчиков

URL (Uniform Resource Locator) — строка, однозначно идентифицирующая ресурс в сети. Понимание структуры URL и умение корректно его разбирать критично для веб-разработки, парсинга, редиректов и интеграций. В этой статье разберём компоненты URL по RFC 3986, кодирование, парсинг в JavaScript и Python, типичные ошибки и инструменты для анализа.

Для быстрого разбора URL используйте URL Парсер на reChecker.

Структура URL по RFC 3986

Стандарт RFC 3986 определяет общую форму URL:

scheme:[//authority]path[?query][#fragment]

Полный пример:

https://user:pass@example.com:443/path/to/page?key=value&foo=bar#section

Компоненты URL

Компонент	Описание	Пример
scheme (протокол)	Протокол доступа	`https:`, `http:`, `ftp:`
authority	Хост, порт, учётные данные	`//example.com:443`
userinfo	Логин и пароль (редко используется)	`user:pass@`
host	Домен или IP	`example.com`, `192.168.1.1`
port	Порт (опционально)	`:443`, `:3000`
path	Путь к ресурсу	`/path/to/page`
query	Параметры запроса	`?key=value&foo=bar`
fragment	Якорь (часть страницы)	`#section`

Схема (протокол)

Определяет способ доступа к ресурсу. Часто используемые:

http: — HTTP
https: — HTTPS (HTTP over TLS)
ftp: — FTP
mailto: — email
file: — локальный файл

Протокол заканчивается двоеточием. После // начинается authority (для http/https).

Authority (хост и порт)

Authority включает хост и опционально порт. Для HTTP порт 80 опускается, для HTTPS — 443.

https://example.com          → хост example.com, порт 443 (по умолчанию)
http://localhost:3000        → хост localhost, порт 3000
https://sub.example.com:8443 → хост sub.example.com, порт 8443

Path (путь)

Путь идентифицирует ресурс на сервере. Начинается с /. Сегменты разделяются слэшами.

/path/to/page
/api/v1/users
/

Пустой путь или отсутствие пути после домена обычно трактуется как /.

Query string (строка запроса)

Параметры после ? в формате key=value, разделённые &.

?q=search&page=1&lang=ru

Символы =, &, ?, # имеют специальное значение. Значения с пробелами, кириллицей или спецсимволами должны быть закодированы (percent-encoding).

Fragment (хеш)

Фрагмент указывает на часть документа (якорь). Не передаётся на сервер — обрабатывается клиентом.

#section-2
#top

URI, URL и URN

URI (Uniform Resource Identifier) — общий термин для идентификаторов ресурсов. URL — подмножество URI, указывающее местоположение и способ доступа. URN (Uniform Resource Name) — идентификатор по имени без указания местоположения (например, urn:isbn:0451450523). В веб-разработке чаще всего работают с URL; термины URL и URI нередко используют как синонимы.

URL encoding (percent-encoding)

Символы вне набора A-Za-z0-9-_.~ и зарезервированные :/?#[]@!$&'()*+,;= в определённых позициях кодируются как %XX, где XX — шестнадцатеричный код байта в UTF-8.

Символ	Кодирование
Пробел	`%20` или `+` (в form data)
Кириллица «П»	`%D0%9F` (UTF-8)
`&`	`%26`
`=`	`%3D`

При парсинге URL браузер и сервер автоматически декодируют значения. При формировании URL вручную необходимо кодировать параметры через encodeURIComponent (JavaScript) или urllib.parse.quote (Python).

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

Абсолютный URL

Содержит схему и authority. Полная ссылка на ресурс.

https://example.com/page
http://localhost:3000/api

Относительный URL

Относится к текущему документу или базовому URL.

URL	Базовый URL	Результат
`page`	`https://example.com/`	`https://example.com/page`
`/page`	`https://example.com/path/`	`https://example.com/page`
`../page`	`https://example.com/a/b/`	`https://example.com/a/page`
`?q=1`	`https://example.com/`	`https://example.com/?q=1`

При парсинге относительных URL нужен базовый URL для разрешения. В JavaScript new URL(path, base) решает эту задачу.

Парсинг URL в JavaScript

Конструктор URL

Современный API — конструктор URL:

const url = new URL('https://example.com/path?key=value#hash');

url.protocol;   // "https:"
url.hostname;   // "example.com"
url.port;       // ""
url.pathname;   // "/path"
url.search;     // "?key=value"
url.hash;       // "#hash"
url.origin;     // "https://example.com"
url.href;       // полный URL

URLSearchParams для query string

const url = new URL('https://example.com/search?q=hello&page=2');

url.searchParams.get('q');      // "hello"
url.searchParams.get('page');   // "2"
url.searchParams.get('missing'); // null

url.searchParams.forEach((value, key) => {
  console.log(key, value);
});
// q hello
// page 2

Разрешение относительных URL

const base = 'https://example.com/path/';
const relative = '../other?q=1';
const resolved = new URL(relative, base);
// "https://example.com/other?q=1"

Изменение параметров

const url = new URL('https://example.com/page?q=old');
url.searchParams.set('q', 'new');
url.searchParams.set('page', '1');
url.searchParams.delete('oldParam');
url.href; // "https://example.com/page?q=new&page=1"

Парсинг URL в Python

urllib.parse

Стандартная библиотека urllib.parse:

from urllib.parse import urlparse, parse_qs

url = 'https://example.com/path?key=value&foo=bar#section'
parsed = urlparse(url)

parsed.scheme   # 'https'
parsed.netloc   # 'example.com'
parsed.path     # '/path'
parsed.query    # 'key=value&foo=bar'
parsed.fragment # 'section'

Разбор query string

from urllib.parse import parse_qs, parse_qsl

query = 'key=value&foo=bar&foo=baz'
parse_qs(query)   # {'key': ['value'], 'foo': ['bar', 'baz']}
parse_qsl(query)  # [('key', 'value'), ('foo', 'bar'), ('foo', 'baz')]

Сборка URL

from urllib.parse import urlunparse, urlencode

components = ('https', 'example.com', '/path', '', 'key=value', '')
urlunparse(components)  # 'https://example.com/path?key=value'

params = {'q': 'поиск', 'page': 1}
urlencode(params)  # 'q=%D0%BF%D0%BE%D0%B8%D1%81%D0%BA&page=1'

Разрешение относительных URL

from urllib.parse import urljoin

base = 'https://example.com/path/'
urljoin(base, '../other?q=1')  # 'https://example.com/other?q=1'

Типичные ошибки при парсинге

Игнорирование ошибок

Некорректный URL вызывает исключение. Обрабатывайте ошибки:

try {
  const url = new URL(input);
  // работа с url
} catch {
  // некорректный URL
}

Ручной разбор через regex

Регулярные выражения плохо справляются со всеми edge cases URL (кодирование, нестандартные схемы, IPv6). Используйте встроенные парсеры.

Неверное кодирование параметров

При добавлении параметров кодируйте значения:

// Неправильно
const url = `https://example.com/search?q=${userInput}`;

// Правильно
const url = `https://example.com/search?q=${encodeURIComponent(userInput)}`;

Путаница encodeURI и encodeURIComponent

encodeURI — для целого URL, не кодирует ;/?:@&=+$,#
encodeURIComponent — для значений параметров, кодирует почти всё

Для query-параметров всегда используйте encodeURIComponent.

Двойное кодирование

Если значение уже закодировано, повторное кодирование исказит данные. Проверяйте источник.

URL Парсер reChecker

Сервис URL Парсер на reChecker позволяет:

Разобрать URL на компоненты: протокол, хост, порт, путь, query string, хеш
Получить таблицу параметров query string с ключами и значениями
Проверить валидность URL
Увидеть закодированную и декодированную форму

Инструмент подходит для:

Разработчиков — отладка URL, проверка структуры
SEO-специалистов — анализ параметров в URL страниц
Тестировщиков — проверка корректности сформированных ссылок

Вставьте URL в поле и нажмите «Анализировать» — результат отображается в виде таблицы с разбором каждого компонента. Поддерживаются URL с кириллицей, параметрами и фрагментами.

Практические сценарии

Извлечение домена из ссылки

const url = new URL('https://sub.example.com/path?q=1');
const domain = url.hostname;  // "sub.example.com"

Добавление параметра к текущему URL

const url = new URL(window.location.href);
url.searchParams.set('utm_source', 'newsletter');
window.history.replaceState({}, '', url);

Проверка, является ли ссылка внутренней

const link = new URL(href, window.location.origin);
const isInternal = link.origin === window.location.origin;

Парсинг UTM-меток

const url = new URL(pageUrl);
const utm = {
  source: url.searchParams.get('utm_source'),
  medium: url.searchParams.get('utm_medium'),
  campaign: url.searchParams.get('utm_campaign'),
};

Специальные случаи

IPv6: URL с IPv6-адресом заключает хост в квадратные скобки: http://[::1]:8080/. Конструктор URL и urllib.parse корректно обрабатывают такой формат.

Пустой path: URL https://example.com имеет path / (корневой). При разборе pathname вернёт /.

Множественные ?: В query string только первый ? разделяет path и query. Символ ? в значении параметра кодируется как %3F.

Пустые значения: Параметр key= имеет пустое значение. URLSearchParams.get('key') вернёт '', а не null.

Безопасность и валидация

При приёме URL от пользователя (формы, API) необходима валидация:

Протокол: разрешайте только http: и https: для веб-ссылок, чтобы предотвратить javascript: или data: инъекции
Хост: проверяйте, что домен не указывает на внутренние ресурсы (SSRF)
Длина: слишком длинные URL могут вызывать проблемы на сервере или в логах

function isSafeUrl(href) {
  try {
    const url = new URL(href);
    return ['http:', 'https:'].includes(url.protocol);
  } catch {
    return false;
  }
}

FAQ

Что такое RFC 3986?

RFC 3986 — стандарт, определяющий синтаксис URI (и URL как подмножество). Описывает схему, authority, path, query и fragment, а также правила кодирования и разрешения относительных ссылок.

Чем отличается path от query string?

Path (/path/to/page) идентифицирует ресурс на сервере. Query string (?key=value) передаёт дополнительные параметры запроса. Path обычно стабилен для одного типа ресурса; query меняется в зависимости от параметров (фильтры, пагинация, UTM).

Как правильно парсить query string с несколькими значениями для одного ключа?

В JavaScript URLSearchParams.getAll('key') возвращает массив всех значений. В Python parse_qs возвращает словарь, где каждому ключу соответствует список значений.

Почему fragment (хеш) не отправляется на сервер?

Фрагмент предназначен для клиентской навигации внутри документа (якоря). Браузер не включает его в HTTP-запрос. Сервер получает URL без части после #.

Какой инструмент использовать для разбора URL?

URL Парсер reChecker — бесплатный онлайн-инструмент для разбора URL на компоненты. Показывает протокол, хост, порт, путь, параметры query string и хеш в удобной таблице. Поддерживает кириллические URL и отображает закодированную/декодированную форму. Для кодирования и декодирования параметров используйте URL Encoder reChecker.

URL: структура, разбор и парсинг для разработчиков

Для быстрого разбора URL используйте URL Парсер на reChecker.

Структура URL по RFC 3986

Стандарт RFC 3986 определяет общую форму URL:

scheme:[//authority]path[?query][#fragment]

Полный пример:

https://user:pass@example.com:443/path/to/page?key=value&foo=bar#section

Компоненты URL

Компонент	Описание	Пример
scheme (протокол)	Протокол доступа	`https:`, `http:`, `ftp:`
authority	Хост, порт, учётные данные	`//example.com:443`
userinfo	Логин и пароль (редко используется)	`user:pass@`
host	Домен или IP	`example.com`, `192.168.1.1`
port	Порт (опционально)	`:443`, `:3000`
path	Путь к ресурсу	`/path/to/page`
query	Параметры запроса	`?key=value&foo=bar`
fragment	Якорь (часть страницы)	`#section`

Схема (протокол)

Определяет способ доступа к ресурсу. Часто используемые:

http: — HTTP
https: — HTTPS (HTTP over TLS)
ftp: — FTP
mailto: — email
file: — локальный файл

Протокол заканчивается двоеточием. После // начинается authority (для http/https).

Authority (хост и порт)

Authority включает хост и опционально порт. Для HTTP порт 80 опускается, для HTTPS — 443.

https://example.com          → хост example.com, порт 443 (по умолчанию)
http://localhost:3000        → хост localhost, порт 3000
https://sub.example.com:8443 → хост sub.example.com, порт 8443

Path (путь)

Путь идентифицирует ресурс на сервере. Начинается с /. Сегменты разделяются слэшами.

/path/to/page
/api/v1/users
/

Пустой путь или отсутствие пути после домена обычно трактуется как /.

Query string (строка запроса)

Параметры после ? в формате key=value, разделённые &.

?q=search&page=1&lang=ru

Fragment (хеш)

Фрагмент указывает на часть документа (якорь). Не передаётся на сервер — обрабатывается клиентом.

#section-2
#top

URI, URL и URN

URL encoding (percent-encoding)

Символ	Кодирование
Пробел	`%20` или `+` (в form data)
Кириллица «П»	`%D0%9F` (UTF-8)
`&`	`%26`
`=`	`%3D`

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

Абсолютный URL

Содержит схему и authority. Полная ссылка на ресурс.

https://example.com/page
http://localhost:3000/api

Относительный URL

Относится к текущему документу или базовому URL.

URL	Базовый URL	Результат
`page`	`https://example.com/`	`https://example.com/page`
`/page`	`https://example.com/path/`	`https://example.com/page`
`../page`	`https://example.com/a/b/`	`https://example.com/a/page`
`?q=1`	`https://example.com/`	`https://example.com/?q=1`

При парсинге относительных URL нужен базовый URL для разрешения. В JavaScript new URL(path, base) решает эту задачу.

Парсинг URL в JavaScript

Конструктор URL

Современный API — конструктор URL:

const url = new URL('https://example.com/path?key=value#hash');

url.protocol;   // "https:"
url.hostname;   // "example.com"
url.port;       // ""
url.pathname;   // "/path"
url.search;     // "?key=value"
url.hash;       // "#hash"
url.origin;     // "https://example.com"
url.href;       // полный URL

URLSearchParams для query string

const url = new URL('https://example.com/search?q=hello&page=2');

url.searchParams.get('q');      // "hello"
url.searchParams.get('page');   // "2"
url.searchParams.get('missing'); // null

url.searchParams.forEach((value, key) => {
  console.log(key, value);
});
// q hello
// page 2

Разрешение относительных URL

const base = 'https://example.com/path/';
const relative = '../other?q=1';
const resolved = new URL(relative, base);
// "https://example.com/other?q=1"

Изменение параметров

const url = new URL('https://example.com/page?q=old');
url.searchParams.set('q', 'new');
url.searchParams.set('page', '1');
url.searchParams.delete('oldParam');
url.href; // "https://example.com/page?q=new&page=1"

Парсинг URL в Python

urllib.parse

Стандартная библиотека urllib.parse:

from urllib.parse import urlparse, parse_qs

url = 'https://example.com/path?key=value&foo=bar#section'
parsed = urlparse(url)

parsed.scheme   # 'https'
parsed.netloc   # 'example.com'
parsed.path     # '/path'
parsed.query    # 'key=value&foo=bar'
parsed.fragment # 'section'

Разбор query string

from urllib.parse import parse_qs, parse_qsl

query = 'key=value&foo=bar&foo=baz'
parse_qs(query)   # {'key': ['value'], 'foo': ['bar', 'baz']}
parse_qsl(query)  # [('key', 'value'), ('foo', 'bar'), ('foo', 'baz')]

Сборка URL

from urllib.parse import urlunparse, urlencode

components = ('https', 'example.com', '/path', '', 'key=value', '')
urlunparse(components)  # 'https://example.com/path?key=value'

params = {'q': 'поиск', 'page': 1}
urlencode(params)  # 'q=%D0%BF%D0%BE%D0%B8%D1%81%D0%BA&page=1'

Разрешение относительных URL

from urllib.parse import urljoin

base = 'https://example.com/path/'
urljoin(base, '../other?q=1')  # 'https://example.com/other?q=1'

Типичные ошибки при парсинге

Игнорирование ошибок

Некорректный URL вызывает исключение. Обрабатывайте ошибки:

try {
  const url = new URL(input);
  // работа с url
} catch {
  // некорректный URL
}

Ручной разбор через regex

Неверное кодирование параметров

При добавлении параметров кодируйте значения:

// Неправильно
const url = `https://example.com/search?q=${userInput}`;

// Правильно
const url = `https://example.com/search?q=${encodeURIComponent(userInput)}`;

Путаница encodeURI и encodeURIComponent

encodeURI — для целого URL, не кодирует ;/?:@&=+$,#
encodeURIComponent — для значений параметров, кодирует почти всё

Для query-параметров всегда используйте encodeURIComponent.

Двойное кодирование

Если значение уже закодировано, повторное кодирование исказит данные. Проверяйте источник.

URL Парсер reChecker

Сервис URL Парсер на reChecker позволяет:

Разобрать URL на компоненты: протокол, хост, порт, путь, query string, хеш
Получить таблицу параметров query string с ключами и значениями
Проверить валидность URL
Увидеть закодированную и декодированную форму

Инструмент подходит для:

Разработчиков — отладка URL, проверка структуры
SEO-специалистов — анализ параметров в URL страниц
Тестировщиков — проверка корректности сформированных ссылок

Практические сценарии

Извлечение домена из ссылки

const url = new URL('https://sub.example.com/path?q=1');
const domain = url.hostname;  // "sub.example.com"

Добавление параметра к текущему URL

const url = new URL(window.location.href);
url.searchParams.set('utm_source', 'newsletter');
window.history.replaceState({}, '', url);

Проверка, является ли ссылка внутренней

const link = new URL(href, window.location.origin);
const isInternal = link.origin === window.location.origin;

Парсинг UTM-меток

const url = new URL(pageUrl);
const utm = {
  source: url.searchParams.get('utm_source'),
  medium: url.searchParams.get('utm_medium'),
  campaign: url.searchParams.get('utm_campaign'),
};

Специальные случаи

Пустой path: URL https://example.com имеет path / (корневой). При разборе pathname вернёт /.

Пустые значения: Параметр key= имеет пустое значение. URLSearchParams.get('key') вернёт '', а не null.

Безопасность и валидация

При приёме URL от пользователя (формы, API) необходима валидация:

Протокол: разрешайте только http: и https: для веб-ссылок, чтобы предотвратить javascript: или data: инъекции
Хост: проверяйте, что домен не указывает на внутренние ресурсы (SSRF)
Длина: слишком длинные URL могут вызывать проблемы на сервере или в логах

function isSafeUrl(href) {
  try {
    const url = new URL(href);
    return ['http:', 'https:'].includes(url.protocol);
  } catch {
    return false;
  }
}

URL: структура, разбор и парсинг для разработчиков

URL: структура, разбор и парсинг для разработчиков

Структура URL по RFC 3986

Компоненты URL

Схема (протокол)

Authority (хост и порт)

Path (путь)

Query string (строка запроса)

Fragment (хеш)

URI, URL и URN

URL encoding (percent-encoding)

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

Абсолютный URL

Относительный URL

Парсинг URL в JavaScript

Конструктор URL

URLSearchParams для query string

Разрешение относительных URL

Изменение параметров

Парсинг URL в Python

urllib.parse

Разбор query string

Сборка URL

Разрешение относительных URL

Типичные ошибки при парсинге

Игнорирование ошибок

Ручной разбор через regex

Неверное кодирование параметров

Путаница encodeURI и encodeURIComponent

Двойное кодирование

URL Парсер reChecker

Практические сценарии

Извлечение домена из ссылки

Добавление параметра к текущему URL

Проверка, является ли ссылка внутренней

Парсинг UTM-меток

Специальные случаи

Безопасность и валидация

FAQ

Что такое RFC 3986?

Чем отличается path от query string?

Как правильно парсить query string с несколькими значениями для одного ключа?

Почему fragment (хеш) не отправляется на сервер?

Какой инструмент использовать для разбора URL?

Попробуйте инструменты reChecker

Термины по теме статьи

SSL-сертификат: что это и зачем нужен

Минификация кода: что это и зачем нужна

Пагинация: что это и как настроить для SEO

INP (Interaction to Next Paint): что это и как улучшить

Похожие статьи

Escape и Unescape: экранирование HTML, JSON, JavaScript и URL

JSON Schema: как валидировать данные и описывать API

15 полезных cron-задач для веб-разработчика

Docker Compose для веб-разработки: WordPress, Node.js, PHP

Понравилась статья?

Содержание

Поделиться

Поделиться статьей

Популярные теги

Теги

Поддержка reChecker

URL: структура, разбор и парсинг для разработчиков

URL: структура, разбор и парсинг для разработчиков

Структура URL по RFC 3986

Компоненты URL

Схема (протокол)

Authority (хост и порт)

Path (путь)

Query string (строка запроса)

Fragment (хеш)

URI, URL и URN

URL encoding (percent-encoding)

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

Абсолютный URL

Относительный URL

Парсинг URL в JavaScript

Конструктор URL

URLSearchParams для query string

Разрешение относительных URL