Cómo obtener la URL actual con JavaScript: análisis bajo el capó

Cómo obtener la URL actual con JavaScript: analizando lo que se oculta bajo el capó

Imagine: está sentado frente a su computadora, ha abierto el navegador, en la barra de direcciones se muestra un enlace largo. Quiere que su script en JavaScript «lea» este enlace, lo descomponga en partes y haga algo útil con ellas. ¿Le suena familiar? ¡Por supuesto! Esta es una de las preguntas más populares en Stack Overflow — «Get the current URL with JavaScript?» ha acumulado cientos de miles de visitas. ¿Por qué? Porque ningún proyecto serio puede prescindir de esta tarea: navegación dinámica, analítica, formularios, solicitudes AJAX — en todas partes necesitamos saber dónde estamos.

En este artículo no solo le mostraré la línea mágica window.location.href, sino que miraré bajo el capó del navegador. Aprenderá cómo está estructurado el objeto location, qué propiedades almacena, cómo analizar URL de forma segura y qué trampas le esperan. ¡Allá vamos!

Conozca al objeto window.location

Cada vez que abre una página web, el navegador crea un objeto especial — window.location. Vive en el espacio de nombres global y contiene toda la información sobre la URL actual. Basta con escribir en la consola:

console.log(window.location);

Verá un objeto con muchas propiedades. Las más populares son:

\n
• href — la cadena completa de la URL (por ejemplo, https://pythonlib.ru/blog?page=2#comments).
\n
• protocol — el protocolo (https: o http:).
\n
• hostname — el nombre del host (pythonlib.ru).
\n
• port — el puerto (si no se especifica, es una cadena vacía).
\n
• pathname — la ruta al archivo o página (/blog).
\n
• search — la cadena de consulta (todo lo que va después de ?, por ejemplo ?page=2).
\n
• hash — el fragmento del enlace (todo lo que va después de #, por ejemplo #comments).
\n

El navegador actualiza automáticamente estas propiedades al hacer clic en un enlace o cambiar la barra de direcciones. No puede simplemente sobrescribirlas (bueno, casi — hablaremos de eso más adelante), pero puede leerlas tantas veces como quiera.

Cómo obtener la URL completa: la forma más sencilla

Si necesita la cadena completa, use la propiedad href:

const currentUrl = window.location.href;\nconsole.log(currentUrl);\n// Salida: "https://pythonlib.ru/blog?page=2#comments"

Este es el «estándar de oro». Funciona en todos los navegadores, incluido Internet Explorer (sí, todavía vive en algunas redes corporativas). Recuérdela como la respuesta universal a la pregunta «cómo obtener la URL actual en JavaScript».

Descomponiendo la URL en partes: ¿para qué sirve?

Supongamos que está creando una tienda en línea. Necesita entender qué parámetros se pasan en la cadena de consulta: ?category=books&sort=price. O quiere desplazar suavemente la página hasta un elemento con el ancla #reviews. Simplemente tomar href no es suficiente. Hay que descomponerlo en sus componentes.

La forma más confiable en JavaScript moderno es usar el constructor URL:

const url = new URL(window.location.href);\nconsole.log(url.searchParams.get('category')); // "books"\nconsole.log(url.hash); // "#reviews"

El objeto URL proporciona acceso al práctico método searchParams — es un verdadero analizador de la cadena de consulta. Puede obtener, agregar y eliminar parámetros sin tener que dividir la cadena manualmente. Bajo el capó, utiliza las mismas propiedades de window.location, pero ofrece una API más limpia.

Bajo el capó: cómo el navegador procesa la URL

Cuando escribe una dirección en la barra del navegador, ocurre toda una cadena de eventos. El navegador descompone la cadena en componentes utilizando el algoritmo descrito en la especificación WHATWG URL Standard. Se ve así aproxi