Wie kodiere, dekodiere und parse ich eine URL?
Du willst eine Suchphrase in einen Link packen. Du hast eine URL kopiert mit Prozentzeichen ueberall und willst lesen, was wirklich drin steckt. Du debuggst eine API und der Querystring sieht aus wie eine Wand aus %20 und &. Dieses Tool deckt alle drei Faelle ab.
Drei Modi an einem Ort: Encode macht aus Klartext ein URL-sicheres Fragment, Decode kehrt das um, Parse zerlegt eine komplette URL in ihre Bestandteile (Scheme, Host, Port, Pfad, Query, Fragment) und legt die Query-Parameter in einer Tabelle ab, mit korrekter Behandlung von Duplikaten, fehlenden Werten und kodierten Keys.
Alles laeuft im Browser. Keine Netzwerk-Calls, keine Logs, keine Spuren.
So nutzt du das Tool
- Waehl einen Modus oben: Encode, Decode oder Parse. Die Eingabebox passt ihren Hinweis an.
- Im Encode-Modus waehlst du eine Strategie: encodeURI (kodiert nur unsichere Zeichen, laesst reservierte Zeichen wie `?&=` in Ruhe), encodeURIComponent (kodiert den Wert eines einzelnen Query-Parameters) oder strict (am aggressivsten, kodiert auch `! * ' ( )`).
- Im Decode-Modus paste einen prozent-kodierten String. Das Tool markiert fehlerhafte Sequenzen wie `%E0%A4` mit einer klaren Fehlermeldung statt still abzustuerzen.
- Im Parse-Modus paste eine vollstaendige URL wie `https://user:pass@example.com:8443/api/v1/items?a=1&a=2&q=hello%20world&flag#section`. Du bekommst eine Tabelle mit Scheme, Username, Password, Host, Port, Pfad, Query, Fragment, plus den Pfad in Segmente zerlegt und die Query als Key/Value-Zeilen.
- Klick Kopieren, um die Ausgabe zu uebernehmen. Klick Beispiel laden, um die Box mit einem repraesentativen Beispiel zu fuellen.
- Fuer Query-Parameter behandelt das Tool Duplikate (`?a=1&a=2` zeigt beide Werte mit einem "2x duplicate"-Badge), fehlende Werte (`?flag` erscheint als null) und prozent-kodierte Keys (der Original-Raw-Key steht neben dem dekodierten).
Wann das nuetzlich ist
Die haeufigsten Situationen, in denen einer der drei Modi ein paar Minuten Frust spart:
- Suchphrase in eine URL packen. Du willst einen "Suche teilen"-Link mit einer Query wie `?q=hello world & friends`. Leerzeichen, Ampersands und Anfuehrungszeichen brechen die URL. Der Encode-Modus macht daraus einen sicheren String, den du direkt in den Link kippen kannst.
- Einen Tracking-Link aus einer E-Mail lesen. Du hast eine Marketing-Mail bekommen und der Link sieht aus wie eine Suppe aus Prozentzeichen. Der Decode-Modus zeigt dir das echte Ziel, inklusive aller UTM-Tags, bevor du klickst.
- Einen API-Call debuggen. Das Frontend schickt einen Request, die Server-Logs zeigen `query=hello%20world%26friends`. Decode bestaetigt, was der Server tatsaechlich erhalten hat, im Gegensatz zu dem, was das Frontend zu schicken glaubte.
- Eine komplexe URL verstehen. Ein Teammitglied schickt einen Link mit Basic-Auth-Credentials, einem nicht-Standard-Port, einem langen Pfad und 10 Query-Parametern. Der Parse-Modus legt das als Tabelle aus, damit du siehst, wohin was geht, ohne dir die Augen kaputt zu machen.
- Eine URL vor dem Speichern validieren. Du nimmst von Usern eingereichte URLs entgegen (eine Jobboerse, eine Portfolio-Seite). Der Parse-Modus markiert ungueltige URLs mit der nativen Fehlermeldung, damit du sie ablehnen kannst, bevor sie deine Datenbank erreichen.
- Querystrings mit Duplikaten handhaben. Eine Facetten-Such-URL hat `?tag=react&tag=typescript&tag=nextjs`. Standard-`URLSearchParams` gibt dir eine flache Liste, aber alle drei Werte unter einem Key gruppiert in der Tabelle zu sehen, macht die Struktur sofort klar.
Fuer HTML-Kontext-Escaping (also `<` oder `&` als wortwoertlichen Text auf einer Seite zu zeigen) nimm den HTML-Entities-Encoder. Fuer Binaer-Payloads, Auth-Header oder Data-URLs nimm den Base64-Encoder.