Парсинг 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 state та підписані параметри запиту, що ви не хочете передавати стороннім сервісам. Цей парсер використовує той самий алгоритм 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 цільової сторінки та вирішуйте, які залишити.
• Валідація партнерських посилань: вставте deeplink, підтвердьте хост призначення та вбудований цільовий редірект до публікації.

Практичний приклад

Вставте 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 ідентичні.

Декодування відбувається автоматично?

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

Чи можна редагувати та відновлювати URL?

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

Парсинг URL — одна з тих дрібних задач, що кожен веб-розробник виконує щотижня. Робити це в браузері, тим самим алгоритмом, що використовує продакшн-код, тримає роботу швидкою, а дані — на вашому комп'ютері.