trabajar url con JavaScrip

istockphoto_2753750-internet-url

Cuando se inicia un proyecto web en ocasiones llega el momento en que se tiene que trabajar con la url o extraer información de ella.

Si no existe o no podemos echar mano de un lenguaje del lado del servidor, siempre podemos recurrir a JavaScript para obtener esta información.

1. Obtener la url de la página actual
Ejemplo que almancena la URL de la página actual en una variable.

1

var url = document.URL;

2. Obtener la URL del raíz

1

 var root = location.protocol + '//' + location.host;

3. Obtener el parámetro “hash”

1

 var param = document.URL.split('#')[1];

4. Cambiar el parámetro “hash” de la barra de direcciones del navegador

En el siguiente ejemplo reemplazamos el parámetro “hash”, que hemos obtenido al hacer clic sobre un enlace. Útil para añadir funcionalidades de marcadores cuando estamos usando Ajax.

1
2
3
4

 $('a.demo-link').click(function(){
    var hash = $(this).attr('href');
    location.hash = hash;
});

5. Redirigir usando Javascript

1

 window.location.href = "http://webintenta.com/";

6. Obtener los parámetros de la url

Si la URL contiene un querystring con varios parámetros, el siguiente snippet analiza cada parámetro y almacena la array como una variable.

1
2
3
4
5
6
7
8
9
10

 var vars = [], hash;
    var q = document.URL.split('?')[1];
    if(q != undefined){
        q = q.split('&');
        for(var i = 0; i < q.length; i++){
            hash = q[i].split('=');
            vars.push(hash[1]);
            vars[hash[0]] = hash[1];
        }
}

Para utilizar cualquiera de los parámetros, puedes acceder al valor utilizando el nombre del parámetro. Por ejemplo, si la URL contiene la querystring “?a=3&b=2&c=1″ puedes acceder al valor de “a” del siguiente modo:

1

 alert(vars['a']);

7. Resaltar el elemento actual de menú

En lugar de modificar manualmente los menús de navegación para agregar una clase “activa” a la página actual podemos utilizar:

var url = document.URL;
$('#menu a[href="'+url+'"]').addClass('active');

8. Comprobar si un enlace contiene una URL externa

El siguiente fragmento de código comprueba si el vínculo contiene una URL y si es así, ésta se abre en una nueva ventana del explorador:

1
2
3
4

 var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
    this.target = "_blank";
});

Te recomendamos leer:

Webmaster GNU/Linux Parte 4: Servidor Mantenimiento y Procesos

Aprende gratis Javascript en Codeacademy

Comprimir CSS y Javascript

Convertir URL en un enlace con jQuery

otros llegaron buscando