Analizza un URL _

Come funziona il parsing degli URL

Il parser usa lo standard WHATWG URL, lo stesso algoritmo che il browser applica a ogni href. Passiamo la stringa al costruttore URL nativo e leggiamo ogni componente come proprietà.

1. Validazione dell'input. Una stringa vuota mostra un avviso di input vuoto. Altrimenti passiamo il testo a new URL(text); un TypeError indica che la stringa non è un URL assoluto valido.
2. Lettura dei componenti strutturali. Leggiamo protocol, username, password, host, hostname, port, pathname, search, hash e origin dall'oggetto URL. Ognuno va nella propria riga così puoi copiarlo singolarmente.
3. Analisi della query string. Iteriamo url.searchParams.entries() e rendiamo una riga per chiave. Il valore grezzo affianca decodeURIComponent(value) così i payload codificati per percentuale (spazi, segni più, Unicode) risultano leggibili in chiaro.
4. Ricostruzione su richiesta. Modifica qualsiasi cella, elimina una riga o aggiungi un nuovo parametro, poi clicca Ricostruisci URL. Lo strumento riassembla un oggetto URL aggiornato con le tue modifiche e scrive il risultato nel campo di input.
5. Modalità live. Attiva la modalità live e ogni pressione di tasto ri-analizza l'URL con un debounce di 150 ms. Utile quando stai incollando frammenti da un log e vuoi un feedback immediato.

Perché analizzare un URL nel browser

• Nulla esce dalla scheda. Gli URL contengono token, ID di sessione, stato OAuth e parametri di query firmati che non vuoi affidare a un servizio di terze parti. Questo parser usa lo stesso algoritmo URL che il tuo browser esegue già localmente — nessun caricamento, nessuna chiamata di rete.
• Corrisponde a ciò che vede il tuo codice. Node.js, Deno, i browser moderni e Cloudflare Workers implementano tutti lo standard WHATWG URL. Ispezionare un URL qui ti dà la stessa suddivisione in componenti che una chiamata new URL(input) fornisce in produzione.
• Legge le query string come fa un essere umano. I valori grezzi e decodificati sono affiancati, quindi una coppia q=ciao%20mondo mostra sia i byte sul filo che il leggibile ciao mondo in un colpo d'occhio. Nessuna decodifica mentale richiesta.
• Modifica e ricostruzione. Elimina un parametro di tracciamento, correggi un errore di battitura nel percorso, cambia una porta — e ricostruisci l'URL. L'output passa di nuovo attraverso il costruttore URL così qualsiasi elemento non valido viene evidenziato prima che tu lo copi.

Applicazioni comuni

Il parsing degli URL emerge nel lavoro quotidiano di sviluppatori, addetti alla sicurezza e analisti ogni volta che un URL è più di un semplice collegamento.

• Debug di endpoint API: verifica un URL base, il percorso e i parametri di query prima di inviare una richiesta curl o Postman.
• Audit dei parametri di tracciamento: elenca ogni UTM, gclid, fbclid o chiave di campagna in un URL di landing page e decidi quali conservare.
• Validazione di link affiliati e partner: incolla un deeplink, verifica l'host di destinazione e il target di redirect incorporato prima di pubblicare.

Un esempio pratico

Incolla https://example.com/search?q=ciao%20mondo&lang=it nel campo di input. Il protocollo legge https:, l'hostname legge example.com, il pathname legge /search e search legge ?q=ciao%20mondo&lang=it. La tabella di query mostra due righe: q con valore grezzo ciao%20mondo e valore decodificato ciao mondo, poi lang con entrambi i valori grezzo e decodificato it. Clicca Rimuovi sulla riga lang, poi Ricostruisci URL — il campo si aggiorna a https://example.com/search?q=ciao%20mondo.

FAQ

Che cos'è un parser URL?

Un parser URL prende una stringa URL e la scompone in componenti denominati: protocollo (https), informazioni utente (nome utente, password), host (hostname più porta opzionale), percorso, query string e frammento. Decodifica anche ogni parametro di query in modo che i valori codificati per percentuale (come %20 per uno spazio) siano leggibili. Il parser qui usa lo standard WHATWG URL, lo stesso che il tuo browser usa per caricare una pagina.

Qual è la differenza tra host e hostname?

L'hostname è solo il dominio (o l'indirizzo IP) — per example.com:8080 l'hostname è example.com. L'host è l'hostname più la porta quando è presente una porta non predefinita, quindi lo stesso URL ha un host di example.com:8080. Per gli URL su porte predefinite (443 per https, 80 per http) host e hostname sono identici.

La decodifica avviene automaticamente?

I componenti strutturali (protocollo, hostname, porta, pathname) sono letti direttamente dall'oggetto URL senza decodifica aggiuntiva — il costruttore URL li normalizza già. I valori della query sono mostrati due volte: la stringa codificata per percentuale grezza come appare in search, e il valore decodificato prodotto da decodeURIComponent. In questo modo puoi copiare la forma che lo strumento downstream si aspetta.

Posso modificare e ricostruire l'URL?

Sì. Ogni cella delle parti e ogni cella dei parametri di query è modificabile. Aggiungi o rimuovi righe di query con i pulsanti Aggiungi e Rimuovi, poi clicca Ricostruisci URL dalle parti. Lo strumento fa passare le tue modifiche attraverso il costruttore URL e scrive il risultato nel campo di input — se le modifiche producono un URL non valido ricevi lo stesso messaggio di errore che otterresti da new URL() nel tuo codice.

Il parsing degli URL è uno di quei piccoli lavori che ogni sviluppatore web esegue ogni settimana. Farlo nel browser, con lo stesso algoritmo usato dal codice in produzione, rende il lavoro veloce e i dati restano sul tuo dispositivo.