Parseer een URL _

Hoe URL-parsing werkt

De parser volgt de WHATWG URL-standaard, hetzelfde algoritme dat de browser gebruikt voor elke href. We geven de string door aan de ingebouwde URL-constructor en lezen elk component terug als een eigenschap.

1. Invoer valideren. Een lege string geeft een melding voor lege invoer. Anders geven we de tekst door aan new URL(text); een TypeError betekent dat de string geen geldige absolute URL is.
2. Structurele componenten uitlezen. We lezen protocol, username, password, host, hostname, port, pathname, search, hash en origin uit het URL-object. Elk component verschijnt in zijn eigen rij zodat je het afzonderlijk kunt kopiëren.
3. Querystring doorlopen. We itereren over url.searchParams.entries() en tonen één tabelrij per sleutel. De onbewerkte waarde staat naast decodeURIComponent(value), zodat percent-gecodeerde inhoud (spaties, plustekens, Unicode) in gewone tekst leesbaar is.
4. Op verzoek herbouwen. Bewerk een cel, verwijder een rij of voeg een nieuwe parameter toe en klik op Herstel URL. De tool reconstrueert een nieuw URL-object van je bewerkingen en schrijft het resultaat terug naar het invoerveld.
5. Live-modus. Schakel live-modus in en elke toetsaanslag herparseert de URL met een debounce van 150 ms. Handig wanneer je fragmenten uit een log plakt en directe feedback wilt.

Waarom een URL in je browser parseren

• Niets verlaat het tabblad. URL's bevatten tokens, sessie-ID's, OAuth-state en ondertekende queryparameters die je niet bij een externe dienst wilt hebben. Deze parser gebruikt hetzelfde URL-algoritme dat je browser al lokaal uitvoert — geen upload, geen netwerkaanroep.
• Overeenkomst met wat je code ziet. Node.js, Deno, moderne browsers en Cloudflare Workers gebruiken allemaal de WHATWG URL-implementatie. Een URL hier inspecteren geeft je dezelfde componentopsplitsing als een new URL(input)-aanroep in productie.
• Querystrings leesbaar voor mensen. Onbewerkte en gedecodeerde waarden staan naast elkaar, zodat een q=hello%20world-paar zowel de wire-bytes als de leesbare hello world in één oogopslag toont. Geen handmatige URL-decodering vereist.
• Heen-en-terug bewerken. Verwijder een trackingparameter, herstel een typefout in het pad, verander een poort — en herstel de URL. De uitvoer gaat terug door de URL-constructor, zodat ongeldige invoer zichtbaar wordt voordat je kopieert.

Veelvoorkomende toepassingen

URL-parsing duikt op in dagelijks ontwikkelaars-, beveiligings- en analysewerk wanneer een URL meer is dan alleen een link.

• API-eindpunten debuggen: bevestig een basis-URL, pad en queryparameters voordat je een curl- of Postman-verzoek verstuurt.
• Trackingparameter-audits: lijst alle UTM-, gclid-, fbclid- of campagnesleutels op een landingspagina-URL en besluit welke je behoudt.
• Affiliate- en partnerlinks valideren: plak een deeplink, bevestig de doelhost en het ingesloten omleidingsdoel voordat je publiceert.

Een uitgewerkt voorbeeld

Plak https://voorbeeld.nl/zoeken?q=hallo%20wereld&lang=nl in het invoerveld. Protocol leest https:, hostnaam leest voorbeeld.nl, padnaam leest /zoeken en zoekopdracht leest ?q=hallo%20wereld&lang=nl. De queryparametertabel toont twee rijen: q met onbewerkte waarde hallo%20wereld en gedecodeerde waarde hallo wereld, dan lang met beide waarden nl. Klik op Verwijder bij de lang-rij en daarna op Herstel URL — het invoerveld wordt bijgewerkt naar https://voorbeeld.nl/zoeken?q=hallo%20wereld.

FAQ

Wat is een URL-parser?

Een URL-parser neemt een URL-string en splitst hem op in benoemde componenten: protocol (https), gebruikersinfo (gebruikersnaam, wachtwoord), host (hostnaam plus optionele poort), pad, querystring en fragment. Hij decodeert ook elke queryparameter zodat percent-gecodeerde waarden (zoals %20 voor een spatie) leesbaar zijn. De parser hier gebruikt de WHATWG URL-standaard, dezelfde die je browser gebruikt om een pagina te laden.

Wat is het verschil tussen host en hostnaam?

Hostnaam is alleen het domein (of IP-adres) — voor voorbeeld.nl:8080 is de hostnaam voorbeeld.nl. Host is de hostnaam plus de poort wanneer een niet-standaardpoort aanwezig is, dus dezelfde URL heeft als host voorbeeld.nl:8080. Voor URL's op standaardpoorten (443 voor https, 80 voor http) zijn host en hostnaam identiek.

Gebeurt decodering automatisch?

Structurele componenten (protocol, hostnaam, poort, padnaam) worden direct uit het URL-object gelezen zonder extra decodering — de URL-constructor normaliseert ze al. Querywaarden worden twee keer getoond: de onbewerkte percent-gecodeerde string zoals hij in search voorkomt, en de gedecodeerde waarde geproduceerd door decodeURIComponent. Zo kun je de vorm kopiëren die je downstream-tool verwacht.

Kan ik de URL bewerken en herbouwen?

Ja. Elke onderdeel-cel en elke queryparameter-cel is bewerkbaar. Voeg queryparameters toe of verwijder ze met de knoppen Toevoegen en Verwijderen, en klik daarna op Herstel URL uit onderdelen. De tool geeft je bewerkingen terug door de URL-constructor en schrijft het resultaat naar het invoerveld — als de bewerkingen een ongeldige URL opleveren, krijg je dezelfde foutmelding als je van new URL() in je eigen code zou krijgen.

URL-parsing is een van die kleine taken die elke webontwikkelaar wekelijks uitvoert. Dit in de browser doen, met hetzelfde algoritme dat productiecode gebruikt, houdt het werk snel en de gegevens op je eigen machine.