Original article: How to Check if a JavaScript String is a Valid URL

Una URL, o Localizador Uniforme de Recursos -por sus siglas en inglés-, es un texto utilizado para identificar recursos como páginas web, imágenes y videos en internet.

Comúnmente nos referimos a las URL como direcciones de sitios web y se utilizan para transferencia de archivos, correos electrónicos y otras aplicaciones.

Las URL constan de varias partes, como el protocolo, el nombre de dominio, y así sucesivamente, que le indican al navegador cómo y dónde recuperar el recurso.

En JavaScript, es posible que necesites usar una URL en las etiquetas, anchor o botones para vincular al usuario con otra página web. En tales situaciones, esta cadena de URL debe verificarse para asegurarse de que sea una URL válida.

Este tutorial te enseñará algunas formas de comprobar si una cadena de JavaScript es una URL válida.

Cómo verificar si una cadena es una URL válida utilizando expresiones regulares (regex)

Las expresiones regulares son patrones que coinciden con combinaciones de caracteres en una cadena. En JavaScript, las expresiones regulares también se conocen como objetos que proporcionan diferentes métodos para realizar varias operaciones.

Puedes construir una expresión regular de dos maneras:

• Usando literales de expresiones regulares
• Usando constructores de expresiones regulares

Nota: Es apropiado utilizar el método de expresiones regulares solo cuando deseas verificar si una cadena es una URL válida y no deseas crear ningún otro objeto adicional.

Aprendamos cómo funcionan estos dos métodos.

Cómo usar literales de expresiones regulares

En un literal de expresión regular, el patrón está encerrado entre barras /…/, como se muestra a continuación.

El patrón incluye la validación de las partes necesarias en la URL. Por ejemplo, un protocolo, https, un //, y así sucesivamente.

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

Cómo usar un constructor de expresiones regulares

Para crear una expresión regular usando el método de construcción, usa el constructor RegExp() y pase el patrón como parámetro.

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

Para demostrar cómo validar si una cadena es una URL, crearemos un método que validará una cadena JavaScript usando el constructor de expresiones regulares y devolverá true o false según el patrón coincidente.

const isValidURL = urlString => {
	  	var patronURL = new RegExp(
            // valida protocolo
            '^(https?:\\/\\/)?'+
            // valida nombre de dominio
	    	'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+
            // valida OR direccion ip (v4)
	    	'((\\d{1,3}\\.){3}\\d{1,3}))'+
            // valida puerto y path
		    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+
            // valida queries
		    '(\\?[;&a-z\\d%_.~+=-]*)?'+
            // valida fragment locator
	    	'(\\#[-a-z\\d_]*)?$','i'); 
	  	return !!patronURL.test(urlString);
	}

Cómo usar expresiones regulares para validar una cadena de URL

El siguiente código demuestra cómo validar diferentes cadenas de URL utilizando el método anterior:

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));      //true

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

Cómo comprobar si una cadena es una URL válida utilizando el constructor URL

También puedes utilizar el constructor URL para comprobar si una cadena es una URL válida.

El constructor URL (new URL(url)) devuelve un objeto URL recién creado definido por los parámetros URL.

Se produce una excepción TypeError de JavaScript si la URL proporcionada no es válida.

Nota: Es apropiado utilizar este método cuando deseas construir un objeto URL en el programa para su uso posterior.

Sintaxis del constructor URL

La siguiente sintaxis explica cómo crear un objeto URL con una cadena JavaScript.

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

Donde,

• url es una cadena de caracteres o cualquier objeto con un stringifier que representa una URL absoluta o relativa. Si la URL es absoluta, se ignorará la base. Si la URL es relativa, la base es requerida.
• base (opcional) es una cadena que representa la URL base. Debe ser pasada cuando la URL es relativa. Por defecto, es undefined cuando se ignora.

Ejemplo del método constructor de URL

Para demostrar cómo funciona el método constructor de URL, creemos una función lambda en JavaScript para construir una nueva URL con la cadena pasada.

• Si la cadena es una URL válida, se crea un objeto URL y se devuelve true.
• Si la cadena no es una URL válida, se lanza una excepción TypeError y se devuelve false.

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

Cómo usar el método isValidURL()

Vamos a invocar el método isValidURL() con diferentes tipos de cadenas y ver los resultados.

  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

En los primeros tres casos, se puede ver que se pasa una cadena de URL no válida. Como resultado, la creación del objeto URL falla con un TypeError y se devuelve false.

En los dos últimos casos, se pasa una cadena de URL válida. Así que se crea un objeto URL con éxito, y se devuelve true, confirmando que la URL es correcta.

Veamos un ejemplo más para validar una parte específica de la URL.

En este ejemplo, se está validando un protocolo específico en la URL. La URL debe contener el protocolo http o https.

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

Ejemplo de cómo validar parte de una URL

Invoquemos el método isValidURL() con diferentes tipos de cadenas y protocolos para ver los resultados.

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

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

En el primer caso, la cadena de URL (tcp://www.jsowl.com) es válida, pero no contiene un protocolo específico (HTTP/HTTPS). Por lo tanto, devuelve falso.

En el segundo caso, la cadena de URL https://www.jsowl.com es válida y contiene el protocolo específico, como resultado, devuelve verdadero.

Cómo comprobar si una cadena es una URL válida utilizando un elemento de entrada

HTML admite un elemento de entrada <input> con el tipo url, específicamente para representar valores de URL.

El atributo value del elemento <input> que contiene la cadena se válida automáticamente mediante la coincidencia de la sintaxis de la URL (tiene una URL vacía o bien formada) antes de que se pueda enviar el formulario.

El método HTMLInputElement.checkValidity() se utiliza para comprobar si una cadena en el atributo value del elemento <input> es una URL. El método checkvalidity() devuelve true si el valor es una URL adecuada y false si la entrada no es una URL adecuada.

Creemos un método que cree un elemento de input tipo URL y valide la entrada utilizando el método checkValidity().

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

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

Ahora usemos este método y validemos diferentes cadenas para verificar si son URL válidas.

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

Así es como se puede usar el método de tipo de entrada para comprobar si una cadena es una URL válida.

Cómo comprobar si una cadena es una URL válida usando el método de etiqueta anchor

Esta sección te enseña cómo usar el HTMLAnchorElement para comprobar si una cadena JavaScript es una URL.

Nota: Es apropiado usar este método cuando quieras asignar una URL a la etiqueta anchor de tu sitio web y asegurarte de que la cadena de la URL sea válida y se asigne correctamente a la etiqueta anchor.

La interfaz HTMLAnchorElement representa los elementos de hipervínculo. Proporciona propiedades y métodos especiales para manipular el diseño y la presentación de tales elementos. También se llama etiqueta anchor.

Puedes asignar una URL a una anchor usando el atributo href. Al asignar...

• Si se pasa una cadena URL válida, se asigna a la etiqueta anchor.
• Si se pasa una URL no válida, se asigna la ubicación actual del navegador a la etiqueta anchor.
• Por defecto, la etiqueta anchor tendrá una URL vacía ("").

Una vez asignada la URL, puedes extraer una parte específica de la URL usando los atributos que se explican a continuación.

Ahora, veamos cómo comprobar si la cadena asignada es una URL adecuada.

Si fuera una URL adecuada, se asignaría a la etiqueta anchor. De lo contrario, se asignará la ubicación actual del navegador a la etiqueta.

Para comprobar si es una URL adecuada, puede comprobar si el atributo host de la etiqueta anchor NO es igual a la ubicación actual mediante la declaración a.host != window.location.host.

Veamos el código.

Creamos una función lambda y la asignamos a la constante isValidUrl en el siguiente código.

La función crea un elemento anchor y asigna la cadena URL. Después, comprueba si el atributo host del elemento es null o no está definido.

Si no es null, comprueba si el atributo host NO es igual a la URL del navegador actual y devuelve true cuando no es igual.

Esto se debe a que si la URL pasada era válida, entonces la etiqueta anchor tendrá el valor de la URL. Pero si la URL pasada era inválida, la etiqueta tendrá la ubicación actual del navegador. En este caso, la función lambda devuelve false.

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

Los siguientes fragmentos de código invocan la función lambda isValidUrl() con diferentes entradas e imprimen la salida correspondiente en la consola.

  var url = "invalidURL";
  console.log("1.AnchorTag: " + isValidUrl(url));    //false

  var url = "htt//jsowl";
  console.log("2.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

Este tutorial está disponible en este JSFiddle.

Conclusión

En este artículo, has aprendido cómo comprobar si una cadena de JavaScript es una URL utilizando diferentes métodos y cuándo es apropiado utilizar cada método.

Si te ha gustado este artículo, no dudes en compartirlo.