URL Parser & Builder
Understand URL Parser & Builder
Zerlegt eine URL in Protokoll, Host, Port, Pfad, Query-Parameter und Fragment und baut aus diesen Teilen wieder eine gültige URL.
How it works
Das Parsen nutzt die eingebaute WHATWG-URL-API des Browsers statt eines regulären Ausdrucks und wendet damit dieselbe Normalisierung an wie die Adresszeile: Schema und Host werden kleingeschrieben, Standard-Ports werden aufgelöst (aus https://example.com:443 wird https://example.com), internationalisierte Domains werden per Punycode kodiert, und was kodiert werden muss, wird prozentkodiert. Query-Parameter werden über URLSearchParams gelesen, das jeden Schlüssel und jeden Wert dekodiert und ein „+“ im Query-String als Leerzeichen behandelt. Beim Zusammenbauen einer URL aus Teilen wird automatisch neu kodiert, und genau deshalb nimmt man dies statt einer Zeichenkettenverkettung.
When to use it
- Eine lange OAuth-Callback- oder Tracking-URL zerlegen, um genau zu sehen, welche Parameter vorhanden sind und wozu sie dekodieren
- Prüfen, ob ein Weiterleitungsziel, dem Sie gleich vertrauen, auf den Host zeigt, den Sie annehmen – zu vergleichen ist der geparste Hostname und keine Teilzeichenkette der gesamten URL
- Eine URL mit von Nutzern gelieferten Query-Werten zusammensetzen, ohne Und-Zeichen, Leerzeichen und Schrägstriche von Hand zu kodieren
- Bestätigen, dass ein prozentkodiertes Pfadsegment (%2F gegenüber /) so überlebt, wie Ihr Router es erwartet
Watch out for
- Wiederholte Query-Schlüssel fallen zusammen. `?tag=a&tag=b` ist zulässig und verbreitet, aber eine schlichte Schlüssel-Wert-Ansicht behält nur den letzten Wert – nutzen Sie im Code `searchParams.getAll("tag")`, wenn Duplikate zählen.
- Das Fragment nach `#` wird niemals an den Server gesendet. Es existiert nur im Browser, und deshalb verbirgt ein dort abgelegtes Token es zwar vor Server-Logs, aber vor keinem Skript auf der Seite.
- Nur absolute URLs lassen sich parsen. Ein relativer Pfad wie `/v2/users` hat weder Schema noch Host und braucht erst eine Basis-URL, bevor er überhaupt geparst werden kann.
- Als `https://user:pass@host/` eingebettete Zugangsdaten lassen sich ebenfalls parsen, und sie erscheinen zusätzlich in Referer-Headern, im Browserverlauf und in Proxy-Logs. Sie hier zu sehen ist ein Grund, sie zu entfernen, nicht sie zu behalten.
Frequently Asked Questions
Wie extrahiere ich Query-Parameter aus einer URL?
Fügen Sie die URL ein. Das Tool zerlegt den Query-String (alles nach dem ?) in einzelne key=value-Paare. Aus ?page=2&sort=date&order=asc werden zum Beispiel drei Parameter: page=2, sort=date, order=asc, jeweils automatisch URL-dekodiert.
Wofür dient das URL-Fragment (#hash)?
Das Fragment (alles nach dem #) wird NICHT an den Server gesendet – es existiert nur im Browser. Es scrollt zu einem Element mit dieser ID (id="section-2"), löst clientseitiges Routing in SPAs aus (React Router, Vue Router) oder trägt Zustand für OAuth-Abläufe (access_token beim Implicit Grant).
Wie baue ich eine URL mit Query-Parametern programmatisch?
Nutzen Sie die URLSearchParams-API in JavaScript: const params = new URLSearchParams({page: 2, sort: 'date'}); url.search = params.toString(). Das kodiert Sonderzeichen automatisch korrekt – vermeiden Sie das manuelle Zusammensetzen von Zeichenketten.
How to Use URL Parser & Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.