Config (JSON)

URL

Cos'è l'URL Builder?

Gli passi un oggetto JSON che descrive le parti di un URL — protocollo, host, path, parametri di query, hash — e lo strumento ti restituisce l'URL assemblato, correttamente percent-encoded. Sotto il cofano usa l'URL API nativa del browser, quindi l'output coincide esattamente con quello che un browser produrrebbe se costruissi l'URL da solo in JavaScript.

Il motivo per cui esiste: costruire un URL a mano è dove si nascondono i bug. Dimentichi di codificare uno spazio nel nome di un cliente, codifichi due volte uno slash già codificato, confondi ? e &, perdi un valore perché hai usato + invece di %20. La spec URL del WHATWG definisce esattamente una risposta giusta per ogni input, ed è quello che ottieni qui. Le chiavi di query ripetute (es. tag=red&tag=blue) sono supportate passando un array — la stessa forma che accetta URLSearchParams.

Gira interamente nel tuo browser. La config JSON e l'URL assemblato non lasciano mai la tua macchina. Le regole di encoding vengono direttamente da RFC 3986 e dai raffinamenti WHATWG sopra. Abbinalo all'URL Parser quando vuoi fare un round-trip di un URL attraverso un form strutturato.

Come usare l'URL Builder

Tre passi. Ognuno corrisponde a un pulsante in questa pagina.

Incolla una config JSON

Incolla a sinistra un oggetto JSON che descrive le parti dell'URL. protocol e host sono obbligatori; il resto è opzionale. Clicca Esempio per caricare un caso realistico con più parametri di query e un 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"
}

Campi opzionali: port, username, password, hash. Dentro searchParams, una stringa è un valore; un array sono chiavi ripetute.

Leggi l'URL assemblato

Il pannello a destra mostra la stringa URL assemblata. Gli spazi diventano + nella query string, le parentesi quadre diventano %5B/%5D, il path viene normalizzato — lo stesso encoding che definisce lo standard URL. Si aggiorna mentre digiti.

Copia o scarica

Clicca Copia per mandare l'URL negli appunti, oppure Scarica per salvarlo come file di testo. Usa Pulisci nel pannello di input per ricominciare da zero.

Quando lo useresti davvero

Creare fixture di test per un client HTTP

Stai scrivendo un test che colpisce /v1/orders con otto parametri di query, due con spazi e uno ripetuto. Scrivere a mano l'URL codificato nel test è soggetto a errori. Costruiscilo da un oggetto JSON che puoi copiare da un log di richieste reale, incolla l'URL risultante nell'assert. Fatto.

Costruire URL di authorize OAuth

Gli URL di authorize OAuth stipano client_id, redirect_uri, scope, state, response_type e code_challenge nella query string. La RFC 6749 richiede esattamente quei nomi e un redirect_uri già codificato una volta prima che l'intero URL venga ricodificato. Il builder lo gestisce in modo trasparente — gli dai i valori grezzi e fa la cosa giusta.

Generare URL di analytics o di share in uno script

Quando generi un URL di campagna con parametri UTM, i valori vengono spesso da un foglio di calcolo dove utm_campaign contiene spazi, ampersand e qualche emoji ogni tanto. Lasciare che il costruttore di URL gestisca l'encoding è più sicuro di un template di stringa. L'output è identico a quello che produrrebbe il modulo URL di Node.

Riprodurre un bug da un ticket di supporto

Un cliente segnala che una ricerca con q=résumé writer dà 500 sull'API. Vuoi riprodurre la richiesta esatta. Costruisci l'URL da JSON, poi mandaci curl. L'accento sulla e e lo spazio vengono codificati come li avrebbe spediti il browser — senza tirare a indovinare.

Domande frequenti

Qual è la differenza tra URL Builder e concatenare stringhe a mano?

L'encoding. https://api.example.com/orders?customer=Ava Chen non è un URL valido — lo spazio lo rompe. Il builder usa internamente URLSearchParams, che codifica quello spazio come + nella query e come %20 nel path. La concatenazione manuale prima o poi sbaglia uno dei due.

Come mando un parametro due volte (es. ?tag=red&tag=blue)?

Usa un array come valore: "tag": ["red", "blue"]. Il builder emette tag=red&tag=blue nell'ordine fornito. Conforme alla spec di URLSearchParams.

Devo includere i due punti dopo il protocollo (https:) o solo https?

Va bene in entrambi i modi. Il builder normalizza sia "protocol": "https" che "protocol": "https:" in https:. Stesso discorso per http, ftp, mailto e schemi personalizzati.

Posso includere credenziali (username/password) nell'URL?

Sì — imposta "username" e "password" nella config. Compaiono prima dell'host come user:pass@host. Tieni presente che la RFC 3986 §3.2.1 avverte di non usare questa forma negli URL di produzione perché finiscono nella cronologia del browser, nei log del server e nelle cache dei proxy.

Perché lo spazio diventa + invece di %20?

Gli spazi nel componente di query sono tipicamente codificati come + secondo le regole application/x-www-form-urlencoded — è quello che emette URLSearchParams. Gli spazi nel path sono codificati come %20. Entrambi sono validi; i server decodificano entrambe le forme. Se il tuo server è rotto e gestisce solo %20, hai un problema più grosso di questo strumento.

Che formato deve avere il JSON di input?

JSON standard — vedi json.org o ECMA-404 per la spec. Le chiavi sono stringhe, i valori sono stringhe o (per searchParams) array di stringhe. Niente commenti. Niente virgola finale.

Altri strumenti URL & JSON

Costruire è una direzione. Ecco cosa ci sta bene insieme: