Разобрать URL _

Как работает разбор URL

Парсер работает по стандарту WHATWG URL — тому же алгоритму, который браузер использует для любого href. Мы передаём строку нативному конструктору URL и считываем каждый компонент как свойство.

1. Проверка ввода. Пустая строка приводит к сообщению о пустом вводе. В остальных случаях текст передаётся в new URL(text); TypeError означает, что строка не является допустимым абсолютным URL.
2. Чтение структурных компонентов. Мы считываем protocol, username, password, host, hostname, port, pathname, search, hash и origin из объекта URL. Каждый помещается в отдельную строку таблицы, чтобы его можно было скопировать отдельно.
3. Разбор строки запроса. Мы перебираем url.searchParams.entries() и отображаем одну строку таблицы на каждый ключ. Исходное значение находится рядом с decodeURIComponent(value), чтобы процентно-закодированные данные (пробелы, символы плюс, Unicode) читались на понятном языке.
4. Сборка по запросу. Отредактируйте любую ячейку, удалите строку или добавьте новый параметр, затем нажмите «Собрать URL». Инструмент восстанавливает свежий объект URL из ваших правок и записывает результат обратно в поле ввода.
5. Живой режим. Включите живой режим — и каждое нажатие клавиши будет повторно разбирать URL с задержкой 150 мс. Удобно, когда вы вставляете фрагменты из логов и хотите мгновенный результат.

Зачем разбирать URL в браузере

• Ничего не покидает вкладку. URL содержат токены, идентификаторы сессий, состояние OAuth и подписанные параметры запроса, которые не должны попадать к сторонним сервисам. Этот парсер использует тот же алгоритм URL, который ваш браузер уже выполняет локально — без загрузки, без сетевых вызовов.
• Совпадает с тем, что видит ваш код. Node.js, Deno, современные браузеры и Cloudflare Workers — все используют реализацию WHATWG URL. Анализ URL здесь даёт тот же разбор компонентов, что и вызов new URL(input) в продакшне.
• Читает строки запроса так, как их понимают люди. Исходные и декодированные значения расположены рядом, поэтому пара q=hello%20world одновременно показывает байты передачи и читаемый hello world. Ручное URL-декодирование не требуется.
• Редактирование с полным циклом. Удалите параметр отслеживания, исправьте опечатку в пути, измените порт — и пересоберите URL. Результат снова проходит через конструктор URL, поэтому всё недопустимое обнаруживается до копирования.

Типичные применения

Разбор URL встречается в повседневной работе разработчика, специалиста по безопасности и аналитика всегда, когда URL — это не просто ссылка.

• Отладка API-эндпоинтов: проверьте базовый URL, путь и параметры запроса перед отправкой запроса через curl или Postman.
• Аудит параметров отслеживания: перечислите все UTM, gclid, fbclid или ключи кампании на URL целевой страницы и решите, что оставить.
• Проверка партнёрских и реферальных ссылок: вставьте диплинк, проверьте целевой хост и встроенную цель перенаправления перед публикацией.

Практический пример

Вставьте https://example.com/search?q=hello%20world&lang=en в поле ввода. Протокол читается как https:, имя хоста — example.com, путь — /search, строка поиска — ?q=hello%20world&lang=en. В таблице параметров запроса будет две строки: q с исходным значением hello%20world и декодированным hello world, затем lang с одинаковым исходным и декодированным значением en. Нажмите «Удалить» в строке lang, затем «Собрать URL» — поле ввода обновится до https://example.com/search?q=hello%20world.

FAQ

Что такое URL-парсер?

URL-парсер принимает строку URL и разбивает её на именованные компоненты: протокол (https), сведения о пользователе (имя пользователя, пароль), хост (имя хоста плюс необязательный порт), путь, строку запроса и фрагмент. Он также декодирует каждый параметр запроса, чтобы процентно-закодированные значения (например, %20 для пробела) были читаемы. Парсер здесь использует стандарт WHATWG URL — тот же, что ваш браузер использует для загрузки страниц.

В чём разница между host и hostname?

Hostname — это просто домен (или IP-адрес): для example.com:8080 hostname равен example.com. Host — это hostname плюс порт, если используется нестандартный порт, поэтому тот же URL имеет host example.com:8080. Для URL на стандартных портах (443 для https, 80 для http) host и hostname идентичны.

Происходит ли декодирование автоматически?

Структурные компоненты (протокол, hostname, порт, путь) считываются непосредственно из объекта URL без дополнительного декодирования — конструктор URL уже нормализует их. Значения параметров запроса отображаются дважды: исходная процентно-закодированная строка в том виде, в каком она присутствует в search, и декодированное значение, полученное с помощью decodeURIComponent. Так вы можете скопировать ту форму, которую ожидает ваш последующий инструмент.

Можно ли редактировать и пересобирать URL?

Да. Каждая ячейка частей и каждая ячейка параметров запроса редактируема. Добавляйте или удаляйте строки параметров кнопками «Добавить» и «Удалить», затем нажмите «Собрать URL из частей». Инструмент прогоняет ваши правки через конструктор URL и записывает результат в поле ввода — если правки создают недопустимый URL, вы получите то же сообщение об ошибке, что и от new URL() в вашем коде.

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