Parsuj URL _

Jak działa parsowanie URL

Parser działa zgodnie ze standardem WHATWG URL — tym samym algorytmem, którego przeglądarka używa dla każdego href. Przekazujemy ciąg do natywnego konstruktora URL i odczytujemy każdy komponent jako właściwość.

1. Weryfikacja danych wejściowych. Pusty ciąg wyświetla komunikat o pustym wejściu. W przeciwnym razie przekazujemy tekst do new URL(text); TypeError oznacza, że ciąg nie jest prawidłowym bezwzględnym URL-em.
2. Odczyt komponentów strukturalnych. Odczytujemy protocol, username, password, host, hostname, port, pathname, search, hash i origin z obiektu URL. Każdy trafia do osobnego wiersza, dzięki czemu można go skopiować oddzielnie.
3. Przetwarzanie ciągu zapytania. Iterujemy po url.searchParams.entries() i renderujemy jeden wiersz tabeli na klucz. Surowa wartość jest widoczna obok decodeURIComponent(value), dzięki czemu zakodowane procentowo dane (spacje, znaki plus, Unicode) są czytelne.
4. Odbudowywanie na żądanie. Edytuj dowolną komórkę, usuń wiersz lub dodaj nowy parametr, a następnie kliknij Zbuduj URL. Narzędzie odtwarza nowy obiekt URL na podstawie Twoich zmian i zapisuje wynik z powrotem w polu wejściowym.
5. Tryb na żywo. Włącz tryb na żywo, a każde naciśnięcie klawisza ponownie parsuje URL z debouncingiem 150 ms. Przydatne, gdy wklejasz fragmenty z logów i chcesz natychmiastowej informacji zwrotnej.

Dlaczego parsować URL w przeglądarce

• Nic nie opuszcza karty. Adresy URL zawierają tokeny, identyfikatory sesji, stan OAuth i podpisane parametry zapytania, których nie chcesz powierzać usługom zewnętrznym. Ten parser używa tego samego algorytmu URL, który Twoja przeglądarka już wykonuje lokalnie — bez przesyłania, bez wywołania sieciowego.
• Zgadza się z tym, co widzi Twój kod. Node.js, Deno, nowoczesne przeglądarki i Cloudflare Workers — wszystkie używają implementacji WHATWG URL. Sprawdzanie URL tutaj daje ten sam podział na komponenty, co wywołanie new URL(input) w środowisku produkcyjnym.
• Odczytuje ciągi zapytania po ludzku. Surowe i zdekodowane wartości są widoczne obok siebie, więc para q=hello%20world wyświetla zarówno surowe bajty, jak i czytelne hello world jednym rzutem oka. Żadnego ręcznego dekodowania URL-i.
• Edycja i odbudowa. Usuń parametr śledzenia, popraw literówkę w ścieżce, zmień port — i odbuduj URL. Wynik przechodzi przez konstruktor URL, więc wszelkie nieprawidłowości są widoczne zanim go skopiujesz.

Typowe zastosowania

Parsowanie URL pojawia się w codziennej pracy deweloperów, specjalistów ds. bezpieczeństwa i analityków zawsze, gdy adres URL jest czymś więcej niż tylko linkiem.

• Debugowanie punktów końcowych API: potwierdź bazowy URL, ścieżkę i parametry zapytania przed wysłaniem żądania curl lub Postman.
• Audyty parametrów śledzenia: wylistuj każdy klucz UTM, gclid, fbclid lub kampanii w URL strony docelowej i zdecyduj, które zachować.
• Weryfikacja linków afiliacyjnych i partnerskich: wklej deeplink, potwierdź docelowy host i osadzony cel przekierowania przed publikacją.

Przykład krok po kroku

Wklej https://example.com/search?q=hello%20world&lang=en do pola wejściowego. Protokół odczytuje https:, nazwa hosta odczytuje example.com, ścieżka odczytuje /search, a wyszukiwanie odczytuje ?q=hello%20world&lang=en. Tabela zapytań pokazuje dwa wiersze: q z surową wartością hello%20world i zdekodowaną wartością hello world, a następnie lang z obiema wartościami en. Kliknij Usuń w wierszu lang, a następnie Zbuduj URL — wejście aktualizuje się do https://example.com/search?q=hello%20world.

FAQ

Czym jest parser URL?

Parser URL przyjmuje ciąg URL i rozkłada go na nazwane komponenty: protokół (https), dane użytkownika (nazwa użytkownika, hasło), host (nazwa hosta z opcjonalnym portem), ścieżkę, ciąg zapytania i fragment. Dekoduje również każdy parametr zapytania, dzięki czemu zakodowane procentowo wartości (np. %20 dla spacji) są czytelne. Parser tutaj używa standardu WHATWG URL, tego samego, którego Twoja przeglądarka używa do wczytywania stron.

Jaka jest różnica między hostem a nazwą hosta?

Nazwa hosta to tylko domena (lub adres IP) — dla example.com:8080 nazwa hosta to example.com. Host to nazwa hosta plus port, gdy obecny jest niestandardowy port, więc ten sam URL ma hosta example.com:8080. Dla URL-i na domyślnych portach (443 dla https, 80 dla http) host i nazwa hosta są identyczne.

Czy dekodowanie następuje automatycznie?

Komponenty strukturalne (protokół, nazwa hosta, port, ścieżka) są odczytywane bezpośrednio z obiektu URL bez dodatkowego dekodowania — konstruktor URL już je normalizuje. Wartości zapytań są pokazywane dwukrotnie: surowy ciąg zakodowany procentowo tak, jak pojawia się w search, i zdekodowana wartość uzyskana przez decodeURIComponent. W ten sposób możesz skopiować dowolną formę oczekiwaną przez Twoje narzędzie docelowe.

Czy mogę edytować i odbudować URL?

Tak. Każda komórka części i każda komórka parametru zapytania jest edytowalna. Dodawaj lub usuwaj wiersze zapytania za pomocą przycisków Dodaj i Usuń, a następnie kliknij Zbuduj URL z części. Narzędzie przepuszcza Twoje zmiany z powrotem przez konstruktor URL i zapisuje wynik do pola wejściowego — jeśli zmiany tworzą nieprawidłowy URL, otrzymasz ten sam komunikat o błędzie, co z new URL() w swoim kodzie.

Parsowanie URL to jedno z tych małych zadań, które każdy programista webowy wykonuje co tydzień. Robienie tego w przeglądarce, z tym samym algorytmem, którego używa kod produkcyjny, sprawia, że praca jest szybka, a dane pozostają na Twoim komputerze.