En este post voy a recopilar unos pequeños snippets de javascript para obtener la URL de la página actual. En ocasiones no necesitamos la URL completa sino algunas partes, como el hash, el query string o la ruta. Cubriré las más importantes y más utilizados.

1

Obtener la URL actual completa

La URL actual se puede obtener mediante este código:

var URLactual = window.location;
alert(URLactual);

En window.location se almacena el valor, como su nombre indica, de la localización del documento actual. Por ejemplo, si estamos en la URL http://unsitio.com/directorio/pagina.html?key=value#4574, la localización es toda la cadena http://unsitio.com/directorio/pagina.html?key=value#4574, incluyendo el dominio y protocolo (http://unsition.com), la ruta o pathname (/directorio/pagina.html), el query string (?key=value) y el identificador de fragmento (#4574).

En este contexto window.location sería sinónimo de window.location.href. Con este código se obtendría el mismo resultado:

var URLactual = window.location.href;
alert(URLactual);

Con jQuery se puede obtener con:

var URLactual = jQuery(location).attr('href');
2

Obtener el pathname

Además del href, el objeto window.location tiene más propiedades. Por ejemplo, si queremos obtener sólo el pathname (ruta):

var pathname = window.location.pathname;
alert(pathname);

Por ejemplo, si tenemos http://unsitio.com/directorio/pagina.html, el pathname es /directorio/pagina.html. El pathname no incluye, si lo hay, el query string ni el identificador de fragmento.

3

Obtener la ruta absoluta

Con la siguiente función obtendríamos la ruta absoluta (absolute path) que incluye el pathname y el dominio:

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

Por ejemplo,en la URL http://unsitio.com/directorio/pagina.html, la ruta absoluta es http://unsitio.com/directorio/.

4

Obtener el dominio

Para obtener sólo el dominio actual podemos acceder al atributo host de window.location:

var URLdomain = window.location.host;
alert(URLdomain);

Por ejemplo, si tenemos http://unsitio.com/directorio/pagina.html, el dominio es unsitio.com. Nota que no se incluye el protocolo (en este caso http). Si necesitamos saber el protocolo utilizaremos window.location.protocol.

5

Obtener el hash o identificador de fragmento

Si queremos obtener sólo el hash de la URL:

var URLhash = window.location.hash;
alert(URLhash);

Por ejemplo, si tenemos http://unsitio.com/directorio/pagina.html#boo, el hash es #boo.

6

Obtener el query string

Por último, si queremos obtener el query string de la URL actual (también llamado search):

var URLsearch = window.location.search;
alert(URLsearch);

Por ejemplo, si tenemos http://unsitio.com/directorio/pagina.html?key=value#boo, el query string es ?key=value.

El objeto window.location tiene más propiedades que nos pueden ser útiles. Puedes ver una lista completa en esta página de Mozilla Developer.