URL

Componenten

Wat is de URL-parser?

Plak een URL en de tool splitst hem op in de stukken die er echt toe doen — protocol, host, poort, pad, query-parameters, hash. De uitvoer is JSON, dus je kunt het direct in een test-fixture, een debug-log, of waar je ook de componenten in gestructureerde vorm nodig hebt, plakken. De parser volgt de WHATWG URL Standard, die elke moderne browser intern gebruikt.

Waarom een parser? Omdat het pijnlijk is om een lange URL met vijf percent-gecodeerde query-parameters en een hash-fragment te lezen. De browser kan dit allang via de URL API, maar je hebt geen snelle plak-en-zie-oppervlakte ervoor. Dit is die. Query-parameters worden ook gedecodeerd — %20 wordt een spatie, %5B wordt [, herhaalde sleutels worden een array — zelfde gedrag als URLSearchParams.

Alles draait in je browser. Geen upload, geen server, geen logs. URL-parsing is deterministisch — geen AI, geen gokwerk, alleen hetzelfde algoritme dat RFC 3986 definieerde en de WHATWG-spec verfijnde.

Hoe gebruik je de URL-parser

Drie stappen. Elke stap hoort bij een knop op deze pagina.

Plak een URL of laad het voorbeeld

Drop een URL in het linker paneel. Klik op Voorbeeld om een realistisch geval te laden met percent-encoding, herhaalde query-sleutels en hash-fragment. Voorbeeld-URL:

https://api.shop.example.com/v1/orders?customer=Ava%20Chen&status=active&total%5Bgte%5D=49.99&page=2#summary

Alles wat de URL-constructor accepteert werkt — inclusief <code>file://</code>, <code>mailto:</code>, custom schema's, IPv6-hosts en userinfo (<code>user:pass@host</code>).

Lees de componenten

Het rechter paneel toont de geparste URL als JSON: protocol, host, port, pathname, pathSegments (het pad gesplitst in een array), searchParams (gedecodeerde sleutel-waarde-paren, met arrays voor herhaalde sleutels) en hash. Werkt bij terwijl je typt.

Kopiëren of downloaden

Klik op Kopiëren om de JSON naar je klembord te sturen, of Download om hem op te slaan als .json-bestand. Minify drukt de JSON tot één regel als je het voor een logregel nodig hebt. Gebruik Wissen in het invoerpaneel om opnieuw te beginnen.

Wanneer je dit echt zou gebruiken

Redirects en analytics-URL's debuggen

Een URL met twaalf query-parameters uit een advertentietracking-redirect is onleesbaar in de adresbalk. Plak hem hier om de parameters per regel, gedecodeerd, te zien, met de bestemmings-url-parameter volledig uitgepakt. Past goed bij het strippen van trackers in onze URL Cleaner (zodra die er is).

Webhook- en OAuth-callback-URL's inspecteren

OAuth-callbacks en webhook-payloads proppen state in de query string. Het uit elkaar halen maakt direct duidelijk of de state-token mist, of de code is afgekapt, of de redirect_uri dubbel is gecodeerd. RFC 6749 vereist die parameters en deze tool laat ze allemaal in één keer zien.

Test-fixtures bouwen

Als je tests tegen een URL schrijft, wil je hem meestal als gestructureerd object, niet als string. Plak de URL, kopieer de JSON, drop in je fixture-bestand. Bespaart je het voor de vijfde keer vandaag protocol: 'https:' uittypen.

Sanity-check op support-tickets

"Het brak toen ik op deze link klikte" — de link is 400 tekens lang met dubbel gecodeerde slashes. De parser laat zien wat de browser precies zou zien, inclusief of %252F een letterlijke %2F betekent of een padscheider die onderweg via een proxy dubbel is gecodeerd.

Veelgestelde vragen

Werkt het met relatieve URL's?

Nee — de URL-constructor heeft een absolute URL nodig (met protocol zoals https:// of file://). Voor relatieve URL's zet je eerst een basis als https://example.com ervoor en haal je die uit het resultaat. De WHATWG-spec beschrijft de twee-argumentenvorm (new URL(relative, base)) die browsers intern gebruiken.

Hoe gaat het om met herhaalde query-sleutels?

Herhaalde sleutels worden samengevouwen tot een array. Dus ?tag=red&tag=blue wordt "tag": ["red", "blue"] in de uitvoer. Dat komt overeen met hoe de meeste server-frameworks (Express, FastAPI, ASP.NET) query strings parsen.

En array-haakjes-notatie zoals ?items[]=1&items[]=2?

De parser behandelt de haakjes als deel van de sleutel — je ziet dus "items[]": ["1", "2"]. Dat is eerlijk tegenover de bytes op de lijn. Als je een framework-specifieke decoder nodig hebt (PHP, Rails, qs.js), doe de nabewerking op de geparste uitvoer.

Is het veilig om credentials in URL's (user:pass@host) hier te plakken?

Het parsen gebeurt volledig in je browser — de URL verlaat je machine nooit. Dat gezegd hebbende: credentials in een URL stoppen is over het algemeen afgeraden (RFC 3986 §3.2.1 noemt de beveiligingsrisico's), en de meeste browsers strippen ze stilletjes. Als je er een plakt, verschijnen de velden username en password in de uitvoer.

Kan het overweg met geïnternationaliseerde domeinnamen (IDN)?

De URL-constructor van de browser kan IDN-domeinen aan, maar de uitvoer kan de Punycode-vorm (xn--...) tonen in plaats van de Unicode-vorm. Zo zou de URL ook daadwerkelijk over de lijn gaan. Als je tussen de twee moet converteren, komt er binnenkort een speciale Punycode-tool in deze sectie.

Waarom heet de uitvoer "Componenten" in plaats van "JSON"?

Het is JSON — maar de framing telt. De uitvoer zijn de onderdelen van de URL, gestructureerd. Als je de pagina als "URL → JSON-converter" ziet, mis je het punt: de waarde zit in de opsplitsing, niet in het formaat.

Andere URL- en JSON-tools

Parsen is één bewerking. Hier zijn de tools die er natuurlijk bij passen: