Cuando estás construyendo páginas web y aplicaciones avanzadas, a veces querrás añadir la función de copiar. Esto permite a tus usuarios simplemente hacer clic en un botón o ícono para copiar texto en lugar de resaltar el texto y presionar un par de botones en el teclado.

Esta característica se utiliza principalmente cuando alguien necesita copiar un código de activación, clave de recuperación, fragmento de código, etc. También puedes añadir funcionalidades como una alerta o texto en la pantalla (que podría ser un modal) para informar al usuario que el texto ha sido copiado a su portapapeles.

Anteriormente, habrías manejado esto usando document.execCommand(), pero ese método está obsoleto (ya no se recomienda). Ahora puedes usar la API de Clipboard (portapateles), que te permite responder a comandos de portapapeles (cortar, copiar y pegar) y leer y escribir de forma asíncrona en el portapapeles del sistema.

En este artículo, aprenderás cómo escribir (copiar) texto e imágenes al portapapeles con la API de Clipboard.

En caso de que tengas prisa, aquí está el código:

<p id="miTexto">Hola Mundo</p>
<button class="btn" onclick="copiarContenido()">¡Copiar!</button>

<script>
  let texto = document.getElementById('miTexto').innerHTML;
  const copiarContenido = async () => {
    try {
      await navigator.clipboard.writeText(texto);
      console.log('Contenido copiado al portapapeles');
    } catch (err) {
      console.error('Error al copiar: ', err);
    }
  }
</script>

Si no tienes prisa, profundicemos en la API y veamos cómo funciona esto con un proyecto de demostración.

Cómo verificar los permisos del Navegador

Es importante saber que la API de Clipboard sólo es compatible con páginas servidas a través de HTTPS. También debes verificar los permisos del navegador antes de intentar escribir en el portapapeles para confirmar si tienes acceso de escritura. Puedes hacerlo con la consulta navigator.permissions:

navigator.permissions.query({ name: "write-on-clipboard" })
.then((resultado) => {
  if (resultado.state == "granted" || resultado.state == "prompt") {
    alert("¡Permiso de escritura concedido!");
  }
});

Cómo copiar texto al portapapeles

Para copiar texto, usarás el método asíncrono writeText(). Este método acepta solo un parámetro: el texto que se copiará en tu portapapeles. Esto puede ser una cadena de texto, un template literal que contenga variables y otras cadenas de texto, o una variable utilizada para almacenar una cadena de texto.

Dado que este método es asíncrono, devuelve una promesa. Esta promesa se resuelve si el portapapeles ha sido actualizado con éxito y se rechaza en caso contrario:

navigator.clipboard.writeText("Este es el texto a copiar")
.then(() => {
  console.log('Contenido copiado al portapapeles');
  /* Resuelto - texto copiado al portapapeles con éxito */
},() => {
  console.error('Error al copiar');
  /* Rechazado - fallo al copiar el texto al portapapeles */
});

También puedes usar async/await junto con try/catch:

async function copiarContenido() {
  try {
    await navigator.clipboard.writeText('Este es el texto a copiar');
    console.log('Contenido copiado al portapapeles');
    /* Resuelto - texto copiado al portapapeles con éxito */
  } catch (err) {
    console.error('Error al copiar: ', err);
    /* Rechazado - fallo al copiar el texto al portapapeles */
  }
}

Ejemplo de cómo copiar texto al portapapeles

Aquí hay una demostración que muestra cómo funciona usando un ejemplo de la vida real. En este ejemplo, estamos obteniendo citas de una API pública. Luego, cuando haces clic en el ícono de copiar, se copia la cita junto con su autor, mostrando que puedes ajustar lo que copias en el método writeText().

Conclusión

En este artículo, has aprendido cómo copiar texto al portapapeles con JavaScript utilizando la API de Clipboard sin tener que pensar demasiado o instalar alguna biblioteca de JavaScript.

¡Diviértete programando!

¡Embárcate en un viaje de aprendizaje! Explora más de 200 artículos expertos sobre desarrollo web. Visita mi blog para más contenido cautivador de mi parte.

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.

Puedes usar el método includes()  en JavaScript para verificar si un elemento existe dentro de un arreglo. También puedes usarlo para verificar si un substring existe dentro de una cadena de texto.

Devuelve true si el elemento se encuentra en el arreglo/cadena y false si el elemento no existe.

En este artículo, verás cómo utilizar el método includes() en JavaScript para comprobar si un elemento está en un arreglo, y si un substring existe dentro de una cadena.

Cómo verificar si un elemento está en un arreglo en JavaScript utilizando arreglo.includes()

Esta es la sintaxis para utilizar el método includes() y verificar si un elemento está en un arreglo:

arreglo.includes(elemento, indiceInicial)

Desglosemos la sintaxis anterior:

arreglo representa el nombre del arreglo en el que se buscará para verificar si un elemento existe.

El método includes() recibe dos parámetros: elemento e indiceInicial.

• elemento es el elemento específico que estás buscando.
• indiceInicial, que es un parámetro opcional, especifica el índice desde el cual iniciar la búsqueda. Si no incluyes este parámetro, el índice predeterminado será 0 (el primer índice).

Aquí hay algunos ejemplos para mostrar cómo usar el método includes() para verificar si un elemento existe en un arreglo:

const numeros = [ 1, 3, 5, 7];
console.log(numeros.includes(3));
// true

En el ejemplo anterior, creamos un arreglo llamado numeros con cuatro números: 1, 3, 5, 7.

Usando la notación de punto, adjuntamos el método includes() al arreglo numeros.

En el parámetro del método includes(), pasamos 3. Este es el elemento que queremos buscar.

Obtuvimos true porque 3 existe en el arreglo numeros.

Intentemos buscar un número que no existe en el arreglo.

const numeros = [ 1, 3, 5, 7];
console.log(numeros.includes(8));
// false

Como se esperaba, obtuvimos false en el ejemplo anterior porque 8 no es un elemento dentro del arreglo numeros.

Cómo verificar si un elemento está en un arreglo en JavaScript usando arreglo.includes() a partir de un índice especificado

En la última sección, vimos cómo verificar si un elemento existía en un arreglo sin usar el segundo parámetro del método includes().

Como recordatorio, el segundo parámetro se utiliza para especificar el índice desde el que se debe comenzar a buscar un elemento en el arreglo.

En un arreglo los índices comienzan desde 0. Entonces, el primer elemento es 0, el segundo elemento es 1, el tercer elemento es 2, y así sucesivamente.

Aquí hay un ejemplo para mostrar cómo podemos usar el segundo parámetro del método includes():

const numeros = [ 1, 3, 5, 7];
console.log(numeros.includes(3, 2));
// false

El ejemplo anterior devolvió false, aunque teníamos 3 como un elemento en el arreglo.

Aquí está el porqué:

Usando el segundo parámetro, le dijimos al método includes() que buscara el número 3 pero comenzando desde el índice 2: numeros.includes(3, 2).

Este es el arreglo: [1, 3, 5, 7]

Índice 0 = 1.

Índice 1 = 3.

Índice 2 = 5.

Índice 3 = 7.

Entonces, comenzando desde el segundo índice que es 5, solo tenemos 5 y 7 ([5,7]) para buscar. Es por eso que buscar 3 a partir del índice 2 devolvió false.

Si cambias el índice desde el que se debe comenzar la búsqueda a 1, entonces obtendrías true porque 3 se puede encontrar dentro de ese rango. Eso es:

const numeros = [ 1, 3, 5, 7];
console.log(numeros.includes(3, 1));
// true

Cómo verificar si un substring está dentro de otra cadena en JavaScript usando el método includes()

Al igual que en los ejemplos anteriores, debes agregar el método includes() al nombre de la cadena en la que se va a buscar mediante la notación de punto.

Aquí está como se ve la sintaxis:

cadena.includes(substring, indiceInicial)

Aquí hay un ejemplo:

const bio = "Soy un desarrollador web";
console.log(bio.includes("web"));
// true

En el ejemplo anterior, la variable bio tiene un valor de "Soy un desarrollador web".

Usando el método includes (), buscamos el substring "web".

Obtuvimos true porque "web" está en la cadena bio.

También puedes usar el segundo parámetro para especificar dónde comenzará la búsqueda, pero ten en cuenta que cada carácter de la cadena representa un índice y los espacios entre cada substring también representan un índice.

Aquí hay un ejemplo para demostrar esto:

let bio = "Soy un desarrollador web";
console.log(bio.includes("web", 22));
// false

Obtenemos false porque el índice 22 es la "e" en "web".

Comenzando desde el índice 22, la cadena se vería así: "eb". El substring "web" no existe en la cadena, por lo que se devuelve false.

Resumen

En este artículo, hablamos sobre el método includes() en JavaScript. Lo usas para verificar si un elemento existe dentro de un arreglo. También puedes usarlo para verificar si se puede encontrar un substring dentro de otra cadena.

Vimos algunos ejemplos que explicaron su uso para buscar un elemento en un arreglo comenzando desde el primer índice, luego otro ejemplo desde un índice especificado.

Por último, vimos cómo usar el método includes() para verificar si un substring existe dentro de una cadena desde el primer índice y desde un índice especificado.

¡Feliz codificación!