Tarde o temprano toca manipular una URL en JavaScript. Conociendo este constructor, vas a poder crear y editar cualquier dirección web o parte de ella sin riesgo a usar algún caracter que no le guste al navegador.
Es este post vamos a ir a lo práctico primero. Si te interesa, abajo tienes un resumen de lo que son las URL y de las partes que la componen.
Constructor URL()
Este constructor permite crear y manipular correctamente URLs. Quizá en alguna ocasión hayas hecho algo así:
const url = `https://dominio.com/api/recurso?valor1=${jsVar1}&valor2=${jsVar2}`
Por favor, sé buena persona y no hagas esto nunca más.
En las URLs hay caracteres especiales que el navegador tiene que interpretar para entender qué le intentamos decir, como ? o &. Además, el valor de las variables jsVar1 y jsVar2 deberían codificarse específicamente para su uso en una URL, imagina que hay un espacio por ahí. Si no lo tienes en cuenta, el navegador explota.
El constructor URL() nos lo pone fácil:
const jsVar1 = "%hola%" const jsVar2 = "un espacio" const url = new URL("https://dominio.com/api/recurso") url.searchParams.set("valor1", jsVar1) url.searchParams.set("valor2", jsVar2) console.log(url.toString()) // https://dominio.com/api/recurso?valor1=%25hola%25&valor2=un+espacio
Como ves, los caracteres especiales, espacios y todo lo que pueda ser problemático en una URL es codificado.
En searchParams tenemos otros métodos disponibles que pueden ser útiles:
const jsVar1 = "%hola%" const jsVar2 = "un espacio" const url = new URL("https://dominio.com/api/recurso") // establecer parámetros con set url.searchParams.set("valor1", jsVar1) url.searchParams.set("valor2", jsVar2) // obtener parámetros con get console.log(url.searchParams.get("valor2")) // un espacio // eliminar un parámetro delete url.searchParams.delete("valor1") console.log(url.toString()) // https://dominio.com/api/recurso?valor2=un+espacio
A parte, podemos indicar rutas, el propio dominio y otras cositas:
const url = new URL("https://dominio.com") url.pathname = "/apartado/recurso" url.host = "www.dominio.com" url.hash = "#encabezado" url.searchParams.set("valor", "hola") console.log(url.toString()) // https://www.dominio.com/apartado/recurso?valor=hola#encabezado // otras propiedades console.log(url.pathname) // /apartado/recurso console.log(url.protocol) // https: console.log(url.search) // ?valor=hola console.log(url.origin) // https://www.dominio.com
Ahí lo tienes, con este mecanismo puedes construir y editar cualquier URL de forma fácil. En el artículo de builder.io hay algún ejemplo más.
Qué son las URL
Es un término usado continuamente, pero a veces damos por supuesto algunos significados que pueden conducirnos al error. Por eso es bueno repasar qué es una URL y ver las partes que la componen.
Las siglas URL vienen de Uniform Resource Locator o Localizador de Recursos Uniforme. Las URL son un una forma de localizar e identificar recursos en Internet.
Son la base de los hiperenlaces, sin los cuales nuestro Internet no sería el mismo.
Puede ser que a veces veas términos como URI o URN, aunque casi siempre se usa el término URL:
- URI (Uniform Resource Identifier): identifica un recurso de forma unívoca
- URN (Uniform Resource Name): identifica un recurso en la red, aunque no de forma exacta
Te ha quedado clarísimo, ¿a que sí? Desde luego son términos y siglas que conducen a confusión. Nos vamos a conformar con lo siguiente:
Una URI puede estar formada por una URL, una URN o por ambos. En este artículo se va a usar el término URL de forma general y vamos a pasar de los otros dos.
Partes de una URL
Vamos a ver de qué partes se compone esta URL: https://zeppelin.dev/sobre-mi.
Protocolo o esquema
https://zeppelin.dev/sobre-mi
Es una forma de clasificar las URL. El más habitual es https. Durante muchos años el más común fue http. Otros esquemas pueden ser ftp, file o ws (para WebSockets).
Dominio de segundo nivel
https://zeppelin.dev/sobre-mi
Es el nombre de dominio escogido para la web.
Dominio de primer nivel
https://zeppelin.dev/sobre-mi
Quizá hayas visto alguna vez las siglas TLD (Top Level Domain). Se refiere a la extensión del dominio y, aunque la más habitual sea .com, hay muchas otras disponibles.
Subdirectorio
https://zeppelin.dev/sobre-mi
Es una división lógica en el sitio web. Ayuda tanto a usuarios como a los rastreadores a entender dónde están ubicados dentro del sitio web.
Los subdirectorios pueden estar formados por más partes, como /blog/lorem-ipsum e incluso, más comúnmente en webs más antiguas, el nombre y extensión de un archivo HTML, PHP o ASP, como /seccion/index.php.
Conclusión
Hemos visto cómo podemos crear y editar en JavaScript un objeto que represente una URL interpretable a las mil perfecciones por el navegador. Una vez tenemos el objeto creado, podemos manipular las diferentes partes de la URL, explicadas en esta última parte del post.