Qué es la API URL de Javascript y cómo usarla

Como todas las aplicaciones que diseñamos hoy en día, llegará el momento en el que debas analizar, manipular o construir una URL para enviar o recibir alguna petición. Los casos de uso más genéricos son buscar un parámetro en la URL actual, por ejemplo un utm_source para mostrar u ocultar algún elemento, construir los parámetros de una URL de forma dinámica basándonos en lo que el usuario ha introducido en algún formulario, etc.

La tarea de analizar la URL con Javascript podría ser un poco peliaguda y muy propensa a tener bugs de no ser porque, para nuestra suerte, existe el URL API.

Analizando una URL con Javascript

Antiguamente, las expresiones regulares dominaban este campo, ya que lo normal era hacer búsquedas mediante patrones. Esto, claramente, era un problema debido a la gran variedad de formatos de URL que podían llegar. Por suerte, la API URL nos van a ayudar mucho a la hora de procesar y construir URL en Javascript.

Imaginemos el siguiente script de código. La URL tiene un esquema válido (aunque un poco sobrecargado para mi gusto). Aun así, es completamente válido.

const url = new URL(
  'https://miusuario:micontraseñ[email protected]:8080/javascript/page?premium=1&entoncesPremium=2#ancla'
);

console.log(url);

El fragmento anterior devuelve un objeto de tipo URL, en el que estarán presentes los siguientes campos (por orden, según se leen de la url):

• protocol: "https:". Indica el protocolo usado para solicitar el recurso, generalmente (http: o https:)
• username: "miusuario". El usuario que solicita el recurso (antes de la @)
• password: "micontrase%C3%B1a". El password del usuario (después de la @ y sin soportar la ñ)
• hostname: "juannicolas.eu". El nombre del dominio.
• port: "8080". El puerto especificado.
• host: "juannicolas.eu:8080". El dominio y, si se añade también como es el caso, el puerto.
• origin: El origen. Recuerda se define origen como protocolo+host+puerto.
• pathname: "/javascript/page". La URI hasta el recurso solicitado dentro del servidor (carpetas y fichero).
• search: "?premium=1&entoncesPremium=2". Los parámetros incluida la ?
• hash: "#ancla"

Te has dado cuenta de que el objeto URL contiene toda la información relativa a la URL que se estaba analizando. Este objeto nos da mucho juego a la hora de tener que analizar URL. Además, si solo queremos usar algunos campos de todos los disponibles, siempre podemos hacer la desestructuración de objeto. ¿A que es genial? 🤓

Otro truco que te puedo dar es que, si introduces en tu navegador (en Node.js no está disponible) la instrucción window.location verás que te devuelve un objeto Location que incluye todos estos campos (más algunos más). Por lo que, si necesitas comprobar si el usuario ha introducido un parámetro en la URL, o analizar si la ruta actual cumple unos requisitos, el objeto URL y el objeto Location son tus nuevos mejores amigos.

Sin embargo, ¿qué pasa si necesito analizar los queryParams que el usuario ha introducido o de la página actual?. Estos queryParams son los parámetros que se añaden detrás de la interrogación en la URL, como por ejemplo ?utm_source=google&another=no. Fíjate que se separan de la URL principal por la interrogación (?) y se concatenan con el ampersand (&). El objeto URL tenía la propiedad search que contenía toda la información (en nuestro ejemplo ?premium=1&entoncesPremium=2) pero, ¿sigo teniendo que hacer una expresión regular para encontrar y separar parámetros? No 😁.

Buscando queryParams en Javascript con URL.searchParams

El objeto y la API URL contiene mucha información sobre la URL, pero no sobre los queryParams porque no deja de ser otra de las partes del esquema de una URL. Sin embargo, hay un conjunto de métodos especializados en recuperar los parámetros que el usuario ha añadido a una URL y, lo mejor de todo, es que te los cuento ahora. El objeto que permite recuperar y modificar información sobre los queryParams de una URL se encuentra en URL.searchParams.

En primer lugar, el caso más común es determinar si el usuario ha adjuntado o no un parámetro en concreto y obtenerlo en el código para poder hacer operaciones con él, por ejemplo, un utm_source. Para determinar si una URL contiene un parámetro determinado y obtenerlo usamos:

const url = new URL('https://a.com/a?utm_source=google')
const hasParam = url.searchParam.has('utm_source');
const param = url.searchParams.get('utm_source');
console.log(hasParam); // == true
console.log(param); // == "google"

Otro de los casos de uso comunes es obtener todas las claves y valores que el usuario ha introducido en la URL. Tal vez es útil para buscar dos o más parámetros dinámicos o para algún tipo de estudio de marketing:

url.searchParams.forEach(function (value, key) {
  console.log(key, value); //key = utm_source; value= google
  if (key === ....) {
     // hacer alguna lógica...
  }
});

Modificando la URL o los queryParams en Javascript

La API URL de Javascript no solo permite obtener datos; también permite editarlos. Esto es ideal cuando queremos realizar modificaciones en la URL de forma segura sin afectar a otras partes de la misma.

Imagina que tenemos que editar el recurso que necesitamos referenciar en la URL. Ya no queremos hacer referencia a /javascript/page sino a /php/another. Pues la solución es bien sencilla: al ser un objeto de Javascript, podemos editar sus propiedades de forma sencilla reescribiéndolas:

const url = new URL(
  'https://miusuario:micontraseñ[email protected]:8080/javascript/page?premium=1&entoncesPremium=2#ancla'
);
url.pathname = '/php/another';
console.log(url);
// https://miusuario:micontrase%C3%[email protected]:8080/otro_recurso?premium=1&entoncesPremium=2#ancla

¡Así de simple! Además, sirve para poder editar el usuario, contraseña, dominio, puerto, etc. Y lo mejor, es que también podemos editar los queryParams que vimos antes con searchParams. La ventaja de que sea una especie de diccionario, es que podemos establecer parámetros (reemplazando si existía previamente), eliminar parámetros o adjuntarlos al final de la URL.

const url = new URL(
  'https://miusuario:micontraseñ[email protected]:8080/javascript/page?premium=1&entoncesPremium=2#ancla'
);
url.searchParams.set('new', '0')
url.searchParams.delete('premium')
url.searchParams.append('aprende', 'si')
console.log(url.href)
//https://miusuario:micontraseñ[email protected]:8080/javascript/page?entoncesPremium=2&new=0&aprende=si#ancla

Conclusión

Ya hemos visto lo fácil y sencillo que es analizar y editar una URL en Javascript gracias a la API URL, que está disponible para navegador y para Node.js. No es necesario usar patrones y expresiones regulares para analizar correctamente una dirección de Internet. Así que no dudes en cambiar tu código para hacerlo más legible la próxima vez que te surja la necesidad de procesar una URL.

La única pega, pero es relativamente pequeña, es que este método no funciona en nuestro querido 😒 Internet Explorer. Así que tendrás que cargar algún polyfill si todavía ofreces compatibilidad con el dinosaurio de los navegadores. Por lo demás, está ampliamente soportado con una tasa cercana al 98% en CanIUse.

¡Qué tengas un feliz coding ☃️!