Config (JSON)

URL

Wat is de URL-builder?

Geef hem een JSON-object dat de onderdelen van een URL beschrijft — protocol, host, pad, query-parameters, hash — en de tool geeft je de samengestelde URL terug, netjes percent-encoded. Onder de motorkap gebruikt hij de native URL API van de browser, dus de output is exact wat een browser zou produceren als je de URL zelf in JavaScript zou bouwen.

Waarom dit bestaat: een URL met de hand bouwen is waar bugs zich verstoppen. Je vergeet een spatie in een klantnaam te encoden, je encoded een al gecodeerde slash twee keer, je haalt ? en & door elkaar, je verliest een waarde omdat je + hebt gebruikt in plaats van %20. De WHATWG URL-spec definieert precies één goed antwoord per input, en dat krijg je hier. Herhaalde query-keys (bijv. tag=red&tag=blue) worden ondersteund door een array door te geven — dezelfde vorm die URLSearchParams accepteert.

Draait volledig in je browser. De JSON-config en de samengestelde URL verlaten je machine nooit. De encoding-regels komen rechtstreeks uit RFC 3986 en de WHATWG-verfijningen daarbovenop. Combineer met de URL-parser als je een URL via een gestructureerd formulier heen en terug wilt sturen.

Hoe gebruik je de URL-builder

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

Plak een JSON-config

Plak links een JSON-object dat de URL-onderdelen beschrijft. protocol en host zijn verplicht; de rest is optioneel. Klik op Voorbeeld om een realistisch voorbeeld te laden met meerdere query-parameters en een hash:

{
  "protocol": "https",
  "host": "api.shop.example.com",
  "pathname": "/v1/orders",
  "searchParams": {
    "customer": "Ava Chen",
    "status": "active",
    "total[gte]": "49.99",
    "page": "2"
  },
  "hash": "summary"
}

Optionele velden: port, username, password, hash. Binnen searchParams is een string één waarde; een array zijn herhaalde keys.

Lees de samengestelde URL

Het rechterpaneel toont de samengestelde URL-string. Spaties worden in de query-string +, vierkante haken worden %5B/%5D, het pad wordt genormaliseerd — dezelfde encoding die de URL-standaard voorschrijft. Werkt mee terwijl je typt.

Kopiëren of downloaden

Klik Kopiëren om de URL naar je klembord te sturen, of Downloaden om hem als tekstbestand op te slaan. Met Wissen in het input-paneel begin je opnieuw.

Wanneer je dit echt zou gebruiken

Test-fixtures bouwen voor een HTTP-client

Je schrijft een test die /v1/orders aanroept met acht query-parameters, waarvan twee met spaties en eentje herhaald. De gecodeerde URL met de hand in de test typen levert fouten op. Bouw hem op uit een JSON-object dat je uit een echte request-log kunt kopiëren, en plak de resulterende URL in de assertion. Klaar.

OAuth-authorize-URLs bouwen

OAuth-authorize-URLs proppen client_id, redirect_uri, scope, state, response_type en code_challenge in de query-string. RFC 6749 vereist precies die parameternamen en een redirect_uri die al één keer gecodeerd is voordat de hele URL nog eens gecodeerd wordt. De builder doet dat transparant — jij geeft de ruwe waarden, hij doet het juiste.

Analytics- of share-URLs genereren in een script

Wanneer je een campagne-URL met UTM-parameters genereert, komen de waarden vaak uit een spreadsheet waarin utm_campaign-waarden spaties, ampersands en af en toe een emoji bevatten. Het encoding aan de URL-constructor overlaten is veiliger dan een string-template. De output is identiek aan wat Node's URL-module zou produceren.

Een bug uit een supportticket reproduceren

Een klant meldt dat een zoekopdracht met q=résumé writer een 500 geeft op de API. Je wilt het exacte verzoek reproduceren. Bouw de URL uit JSON en stuur er curl op af. Het accent op de e en de spatie worden allebei gecodeerd zoals de browser ze had verstuurd — geen giswerk.

Veelgestelde vragen

Wat is het verschil tussen de URL-builder en zelf strings aan elkaar plakken?

Encoding. https://api.example.com/orders?customer=Ava Chen is geen geldige URL — de spatie breekt hem. De builder gebruikt intern URLSearchParams, dat die spatie codeert als + in de query en als %20 in het pad. Met de hand strings aan elkaar plakken gaat vroeg of laat op een van die twee de mist in.

Hoe stuur ik een query-parameter twee keer (bijv. ?tag=red&tag=blue)?

Gebruik een array als waarde: "tag": ["red", "blue"]. De builder geeft tag=red&tag=blue in de opgegeven volgorde. Klopt met de URLSearchParams-spec.

Moet ik de dubbele punt na het protocol (https:) erbij zetten of alleen https?

Allebei werkt. De builder normaliseert zowel "protocol": "https" als "protocol": "https:" tot https:. Hetzelfde voor http, ftp, mailto en eigen schema's.

Mag ik credentials (gebruikersnaam/wachtwoord) in de URL zetten?

Ja — zet "username" en "password" in de config. Ze verschijnen voor de host als user:pass@host. Let op: RFC 3986 §3.2.1 waarschuwt hier tegen voor productie-URLs omdat ze in browsergeschiedenis, server-logs en proxy-caches belanden.

Waarom wordt mijn spatie + in plaats van %20?

Spaties in het query-component worden meestal als + gecodeerd volgens de regels van application/x-www-form-urlencoded — dat is wat URLSearchParams oplevert. Spaties in het pad worden als %20 gecodeerd. Beide zijn geldig; servers decoderen beide vormen. Als je server stuk is en alleen %20 aankan, heb je een groter probleem dan deze tool.

Welk formaat moet de input-JSON zelf hebben?

Standaard JSON — zie json.org of ECMA-404 voor de spec. Keys zijn strings, waarden zijn strings of (voor searchParams) string-arrays. Geen comments. Geen trailing comma's.

Andere URL- & JSON-tools

Bouwen is één richting. Dit past er natuurlijk bij: