Jak zakodować, odkodować i rozłożyć URL na części?
Chcesz wkleić frazę wyszukiwania w link. Skopiowałeś URL pełen znaków procentu i chcesz przeczytać, co jest w środku. Debugujesz API i query string wygląda jak ściana %20 i &. To narzędzie obsługuje wszystkie trzy przypadki.
Trzy tryby w jednym miejscu: Koduj zamienia zwykły tekst na bezpieczny fragment URL, Odkoduj odwraca operację, Rozłóż dzieli pełny URL na części (schemat, host, port, ścieżka, parametry, fragment) i pokazuje parametry zapytania w tabeli z obsługą duplikatów, brakujących wartości i zakodowanych kluczy.
Wszystko działa w przeglądarce. Bez zapytań sieciowych, bez logów, bez śladów.
Jak używać
- Wybierz tryb na górze: Koduj, Odkoduj albo Rozłóż. Pole tekstowe dopasowuje podpowiedź do trybu.
- W trybie Koduj wybierz strategię: encodeURI (koduje tylko znaki niebezpieczne, zostawia strukturalne jak `?&=`), encodeURIComponent (koduje wartość pojedynczego parametru zapytania), albo strict (najmocniejszy, koduje też `! * ' ( )`).
- W trybie Odkoduj wklej tekst z procentami. Narzędzie zgłasza uszkodzone sekwencje typu `%E0%A4` jasnym błędem, zamiast po cichu się wywalić.
- W trybie Rozłóż wklej pełny URL, np. `https://user:pass@example.com:8443/api/v1/items?a=1&a=2&q=hello%20world&flag#section`. Dostajesz tabelę z schematem, użytkownikiem, hasłem, hostem, portem, ścieżką, zapytaniem, fragmentem, plus ścieżkę podzieloną na segmenty i zapytanie na wiersze klucz/wartość.
- Kliknij Kopiuj, żeby skopiować wynik. Kliknij Wczytaj przykład, żeby wpisać reprezentatywny przykład.
- Parser zapytań obsługuje duplikaty (`?a=1&a=2` pokazuje obie wartości z plakietką "2× duplikat"), brakujące wartości (`?flag` pokazuje się jako null) i zakodowane klucze (oryginalny surowy klucz pokazuje się obok zdekodowanego).
Kiedy się przydaje
Najczęstsze sytuacje, w których jeden z trzech trybów oszczędza kilka minut frustracji:
- Wklejasz frazę wyszukiwania do URL-a. Chcesz link "podziel się tym wyszukiwaniem" z zapytaniem typu `?q=hello world & friends`. Spacje, znaki & i cudzysłowy psują URL. Tryb Koduj zamienia to na bezpieczny ciąg, który możesz wkleić wprost w link.
- Czytasz link śledzący z maila. Dostałeś maila marketingowego i link wygląda jak zupa znaków procentu. Tryb Odkoduj pokazuje prawdziwy adres docelowy, razem z tagami UTM, zanim klikniesz.
- Debugujesz wywołanie API. Frontend wysyła request, a logi serwera pokazują `query=hello%20world%26friends`. Odkoduj potwierdza, co serwer dostał faktycznie, w porównaniu do tego, co frontend myślał, że wysłał.
- Rozumiesz skomplikowany URL. Kolega z zespołu przesyła link z danymi basic auth, nietypowym portem, długą ścieżką i 10 parametrami zapytania. Tryb Rozłóż układa to w tabeli, żeby było widać co gdzie idzie, bez mrużenia oczu.
- Walidujesz URL przed zapisem do bazy. Przyjmujesz URL-e od użytkowników (giełda pracy, portfolio). Tryb Rozłóż oznacza nieprawidłowe URL-e natywnym komunikatem błędu, żebyś mógł je odrzucić, zanim trafią do bazy.
- Obsługujesz query string z duplikatami. URL filtrowania wygląda tak: `?tag=react&tag=typescript&tag=nextjs`. Standardowe `URLSearchParams` daje płaską listę, ale wszystkie trzy wartości zgrupowane pod jednym kluczem w tabeli pokazują strukturę na pierwszy rzut oka.
Dla escapowania w kontekście HTML (gdy chcesz pokazać `<` albo `&` jako tekst) sięgnij po koder encji HTML. Dla danych binarnych, nagłówków auth czy data-URLi użyj kodera Base64.