Come Verificare se una Stringa JavaScript è un URL Valido

Articolo originale: https://www.freecodecamp.org/news/check-if-a-javascript-string-is-a-url/

Un URL – o Uniform Resource Locator – è un testo usato per identificare risorse come pagine web, immagini e video su internet.

Gli URL sono chiamati comunemente indirizzi dei siti web e vengono usati per trasferire file, per le email e altre applicazioni.

Gli URL consistono di più parti – protocollo, nome di dominio e via dicendo – che dicono al browser come e dove recuperare la risorsa.

In JavaScript, potresti usare un URL in un tag di ancoraggio o un pulsante per rimandare l'utente a un'altra pagina web. In una situazione del genere, questa stringa URL deve essere verificata per assicurarsi che sia valida.

Questo tutorial ti mostrerà alcuni modi per verificare se una stringa JavaScript è un URL valido.

Per imparare come ottenere l'URL corrente in JavaScript, puoi leggere questo articolo (risorsa in inglese).

Come verificare se una stringa è un URL valido usando un'espressione regolare

Le espressioni regolari (regex) sono dei pattern (modelli) che indicano combinazioni di caratteri in una stringa. In JavaScript, le espressioni regolari sono degli oggetti che offrono diversi metodi per svolgere operazioni varie.

Puoi costruire un'espressione regolare in due modi:

Usando un'espressione regolare letterale
Usando il costruttore RegEx

Nota: è consigliabile usare il metodo letterale quando vuoi soltanto verificare se una stringa è un URL valido senza creare alcun oggetto aggiuntivo.

Vediamo come funzionano questi due metodi.

Come usare le espressioni regolari letterali

In un'espressione regolare letterale, il pattern è racchiuso tra barre oblique, come puoi vedere di seguito.

Il pattern include la validazione delle parti necessarie per l'URL. Ad esempio, un protocollo, https, le barre, //, e via dicendo.

const urlPattern = /(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;

Come usare il costruttore di espressioni regolari

Per creare un'espressione regolare usando l'approccio del costruttore, usa il costruttore RegExp() e passa il pattern come parametro.

const urlPattern = new RegExp('(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?');

Per dimostrare come verificare se una stringa è un URL, creiamo un metodo che validerà la stringa JavaScript usando il costruttore di espressioni regolari, restituendo vero o falso in base al riscontro.

	const isValidUrl = urlString=> {
	  	var urlPattern = new RegExp('^(https?:\\/\\/)?'+ // protocollo
	    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // nome dominio
	    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // o indirizzo ip (v4)
	    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // porta e percorso
	    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
	    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
	  return !!urlPattern.test(urlString);
	}

Come usare un'espressione regolare per validare un URL

Il seguente codice mostra come validare diverse stringhe URL usando il metodo appena creato:

	var url = "invalidURL";
	console.log(isValidUrl(url));      //false
	 
	var url = "htt//jsowl";            //false
	console.log(isValidUrl(url));
	
    var url = "www.jsowl.com";         //true
    console.log(isValidUrl(url));
    
    var url = "https://www.jsowl.com"; //true
    console.log(isValidUrl(url));
    
    var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
    console.log(isValidUrl(url));      //true

Come verificare se una stringa è un URL valido usando il costruttore URL

Puoi usare il costruttore URL per verificare se una stringa è un URL valido.

Il costruttore URL (new URL(url)) restituisce un oggetto URL definito dai parametri URL.

Se l'URL dato non è valido, JavaScript dà un'eccezione TypeError.

Nota: è indicato usare questo approccio quando vuoi costruire un oggetto URL nel tuo programma per ulteriori utilizzi.

Sintassi del costruttore URL

La seguente sintassi spiega come creare un oggetto URL con una stringa JavaScript.

new URL(url);
new URL(url, base);

Dove,

url è una stringa o qualsiasi oggetto dotato di uno stringifier che rappresenta un URL assoluto o relativo. Se l'URL è assoluto, base va ignorato. Se l'URL è relativo, è richiesto anche base.
base (opzionale) è una stringa che rappresenta l'URL base. Deve essere passato quando l'URL è relativo. Risulta undefined quando ignorato.

Esempio del metodo costruttore URL

Per dimostrare come funziona il costruttore URL, creiamo una funzione lambda per costruire un nuovo URL con la stringa passata.

Se la stringa è un URL valido, viene creato un oggetto URL e viene restituito true
Se la stringa non è un URL valido, si verifica un TypeError e viene restituito false

const isValidUrl = urlString=> {
      try { 
      	return Boolean(new URL(urlString)); 
      }
      catch(e){ 
      	return false; 
      }
  }

Come usare il metodo `isValidURL()`

Invochiamo il metodo isValidURL() per diversi tipi di stringhe e vediamo i risultati.

  var url = "invalidURL";
  console.log(isValidUrl(url));     //false
  
  var url = "htt//jsowl";
  console.log(isValidUrl(url));     //false
  
  var url = "www.jsowl.com";
  console.log(isValidUrl(url));     //false
  
  var url = "tcp://www.jsowl.com";
  console.log(isValidUrl(url));     //true
  
  var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
  console.log(isValidUrl(url));     //true

Nei primi tre casi, puoi vedere che è stata passata una stringa che non è un URL valido. Come risultato, la creazione dell'oggetto URL fallisce con un TypeError e viene restituito false.

Negli ultimi due casi, è stato passato un URL valido. Quindi viene creato un oggetto URL e viene restituito true, confermando che l'URL è corretto.

Vediamo un altro esempio per validare una parte specifica di un URL.

In questo esempio, valideremo un protocollo specifico nell'URL, che dovrà contenere il protocollo http o https.

	const isValidUrl = urlString=> {
		let url;
		try { 
	      	url =new URL(urlString); 
	    }
	    catch(e){ 
	      return false; 
	    }
	    return url.protocol === "http:" || url.protocol === "https:";
	}

Esempio di come validare una parte di un URL

Invochiamo il metodo isValidURL() per diversi tipi di stringhe e protocolli e vediamo i risultati.

var url = "tcp://www.jsowl.com";
console.log(isValidUrl(url));      //false

var url = "https://www.jsowl.com";
console.log(isValidUrl(url));      //true

Nel primo caso, la stringa (tcp://www.jsowl.com) è un URL valido, ma non contiene un protocollo specifico (HTTP/HTTPS). Quindi viene restituito false.

Nel secondo caso, la stringa https://www.jsowl.com è un URL valido e contiene il protocollo specifico, quindi viene restituito true.

Come verificare se una stringa è un URL valido con un elemento input

L'HTML supporta gli elementi input di tipo url, per rappresentare in modo specifico gli URL.

L'attributo value di un elemento <input> contenente la stringa viene validato automaticamente dal confronto con la sintassi URL (come un URL vuoto o formato in modo appropriato) prima che il modulo sia inviato.

Il metodo HTMLInputElement.checkValidity() viene usato per controllare se l'attributo value di un elemento <input> è un URL. Il metodo checkvalidity() restituisce true se il valore è un URL corretto e false se l'input non è un URL corretto.

Creiamo un metodo che genera un elemento input di tipo URL e lo valida usando il metodo checkValidity().

    const isValidUrl = urlString =>{
      var inputElement = document.createElement('input');
      inputElement.type = 'url';
      inputElement.value = urlString;

      if (!inputElement.checkValidity()) {
        return false;
      } else {
        return true;
      }
    }

Adesso usiamo questo metodo per validare diverse stringhe e vedere se sono URL validi.

    var url = "invalidURL";
    console.log(isValidUrl(url));     //false
    
    var url = "htt//jsowl";
    console.log(isValidUrl(url));     //false
    
    var url = "www.jsowl.com";
    console.log(isValidUrl(url));     //false
    
    var url = "https://www.jsowl.com";
    console.log(isValidUrl(url));     //true
    
    var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
    console.log(isValidUrl(url));     //true

Ed ecco come puoi usare l'approccio input type per verificare se una stringa è un URL valido.

Come verificare se una stringa è un URL valido con il metodo del tag di ancoraggio

Questa sezione ti mostra come usare un HTMLAnchorElement per controllare se una stringa JavaScript è un URL.

Nota: è consigliabile usare questo metodo quando vuoi assegnare un URL a un tag di ancoraggio e assicurarti che la stringa sia un URL valido.

L'interfaccia HTMLAnchorElement rappresenta degli elementi hyperlink. Fornisce proprietà e metodi speciali per manipolare il layout e la presentazione di tali elementi. Viene anche chiamata tag di ancoraggio.

Puoi assegnare un URL a un tag di ancoraggio usando l'attributo href. Nell'assegnazione,

Se la stringa passata è un URL valido, viene assegnata al tag di ancoraggio
Se la stringa passata non è un URL valido, la posizione attuale del browser viene assegnata al tag
Di default, il tag di ancoraggio avrà un URL vuoto (“”)

Una volta che l'URL è assegnato, puoi estrarre una parte specifica dell'URL usando gli attributi spiegati di seguito.

Attributo	Utilizzo
`host`	una stringa che rappresenta nome dell'host e porta
`hostname`	una stringa che rappresenta il nome dell'host
`href`	una stringa contenente un URL valido
`origin`	restituisce una stringa contenente origine, schema dominio e porta
`port`	una stringa che rappresenta la porta se specificata
`protocol`	una stringa che rappresenta il protocollo, incluso `:`
`pathname`	una stringa che contiene il percorso URL dalla prima `/` senza query string

Adesso vediamo come controllare se la stringa assegnata è un URL corretto.

Se lo è, viene assegnata al tag di ancoraggio. Altrimenti, gli sarà assegnata la posizione attuale del browser.

Quindi per vedere se l'URL è corretto, puoi controllare se l'host del tag di ancoraggio NON è uguale a quello della posizione attuale usando l'istruzione a.host != window.location.host.

Vediamo il codice.

Creiamo un funzione lambda e la assegniamo alla costante isValidUrl.

La funzione crea un tag di ancoraggio e gli assegna la stringa con l'URL. Dopodiché, verifica se l'attributo host dell'elemento è null o non definito.

Se non è null, verifica se l'attributo host NON è uguale alla posizione attuale del browser e restituisce true se non è uguale.

Questo perché se l'URL passato è valido, il tag di ancoraggio avrà un valore URL. Ma se l'URL non è valido, il tag di ancoraggio avrà la posizione attuale del browser. In questo caso, la funzione lambda restituisce false.

const isValidUrl = urlString =>{	
  	var a  = document.createElement('a');
   	a.href = urlString;
   	return (a.host && a.host != window.location.host);
  }

Il codice seguente invoca la funzione lambda isValidUrl() con input differenti e stampa l'output sulla console.

  var url = "invalidURL";
  console.log("1.AnchorTag:  " +isValidUrl(url));    //false
  
  var url = "htt//jsowl";
  console.log("22.AnchorTag:  "+isValidUrl(url));    //false
  
  var url = "www.jsowl.com";  
  console.log("3.AnchorTag:  " +isValidUrl(url));    //false  
  
  var url = "https://www.jsowl.com";  
  console.log("4.AnchorTag:  " +isValidUrl(url));    //true 
  
  var url = "https://www.jsowl.com/remove-an-item-from-an-array-in-javascript/";
  console.log("5.AnchorTag:  " +isValidUrl(url));    //true

Questo tutorial è disponibile in questo JSFiddle.

Conclusione

In questo articolo hai imparato come verificare se una stringa JavaScript è un URL usando diversi metodi e quando usare ogni metodo.

Se ti è piaciuto questo articolo, condividilo.

Puoi vedere i miei altri tutorial sul mio blog, JS Owl.