Cómo obtener la URL actual con JavaScript (y sacarle provecho)

Cuando estás construyendo una app frontend, ya sea con React, Vue, o vanilla JS, es bastante común necesitar acceder a la URL actual. Quizás para:

• Leer parámetros (?id=123)
• Validar rutas (/user vs /admin)
• Detectar entornos (local vs producción)
• Navegar programáticamente (sin <a href>)

TL;DR

const url = window.location.href;
console.log(url);

// https://www.baumannzone.dev/blog/como-obtener-la-url-actual-con-javascript-y-sacarle-provecho

Desglose: todas las partes de la URL

Supongamos que estás en esta URL:

https://www.baumannzone.dev:8080/blog/post?tag=js#comments

Puedes extraer sus partes así:

const { 
  host,       // "www.baumannzone.dev:8080"
  hostname,   // "www.baumannzone.dev"
  href,       // (URL completa)
  origin,     // "https://www.baumannzone.dev:8080"
  pathname,   // "/blog/post"
  port,       // "8080"
  protocol,   // "https:"
  search      // "?tag=js"
  hash,       // "#comments"
} = window.location;

⚠️ Ojo: host incluye el puerto, hostname no. ¡Detalles como este pueden causar bugs!

Ejemplos útiles y reales

Dada esta URL, https://www.baumannzone.dev:8080/blog/post?tag=js#comments, aquí van algunos ejemplos:

1. Obtener un parámetro de búsqueda

const params = new URLSearchParams(window.location.search)
const tag = params.get('tag')

console.log(tag) // => "js"

Pro Tip

// Obtener un parámetro
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id'); // => Devuelve `null` si no existe

// Comprobar si el parámetro existe
const hasId = urlParams.has('id'); // => Devuelve `true` o `false`

2. Redirigir a otro dominio

if (window.location.hostname !== 'www.baumannzone.dev') {
  window.location.href = 'https://www.baumannzone.dev'
}

// 🛡️ Por seguridad, siempre sanitiza
const safeRedirect = (path) => {
  const allowedPaths = ['/home', '/blog'];
  if (allowedPaths.includes(path)) {
    window.location.href = path;
  }
};

3. Navegar a otra ruta

window.location.href = '/uses' 
// redirige a https://www.baumannzone.dev/uses

4. Detectar si estás en localhost

const isLocalhost = window.location.hostname === 'localhost' || 
                    window.location.hostname === '127.0.0.1';

5. Construir y modificar una URL

const url = new URL(window.location.href)

url.pathname = '/patrocinio'
url.searchParams.set('from', 'blog')

console.log(url.toString())
// => https://www.baumannzone.dev/patrocinio?from=blog

Extra para frameworks modernos:

• En React puedes usar useLocation() de React Router
• En Vue puedes usar useRoute() de Vue Router
• Recuerda, window.location funciona siempre en todos

Conclusión

window.location es una de esas APIs nativas que suelen pasarse por alto, pero resuelve muchos casos comunes en apps web:

• Obtener la URL actual
• Leer parámetros
• Detectar el entorno
• Navegar dinámicamente
• Generar URLs desde cero

Sin dependencias, sin magia. Solo JavaScript.

¿Qué otro método nativo de JavaScript te gustaría que explique? Deja un comentario y lo agregaré a la lista. 👇