Skip to main content
Javascript

Cómo manejar los parámetros GET de una url con javascript

Por 11 diciembre, 2020Sin comentarios
Parámetros GET con Javascript

A veces necesitamos obtener, actualizar, borrar o manejar los parámetros GET de una url con javascript. Pero por extraño que parezca, no hay ninguna función nativa de Javascript para obtenerlo. Pero con un poco de código, podemos manejar la query de una url a nuestro antojo. Os dejo algunas funciones:

La primera función sirve para obtener el valor de un parámetro GET de la url sí existe. Devuelve FALSE en caso contrario:

function getQueryParams( name, url ) {
    if ( !url ) {
    	url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if ( !results ) {
    	return false;
    }
    if ( !results[2] ) {
    	return decodeURIComponent( results[2].replace(/\+/g, ' ') );
    }
}

Una segunda función, esta vez para obtener todos los parámetros de la query como un array:

function getAllQueryParams( url ) {
    if ( !url ) {
    	url = window.location.href;
    }
    
    if( url.indexOf('?') > -1 ) {
		url = url.substring( url.indexOf('?') + 1, url.length );

		var splitParams = url.split('&');
		var arrayParams = {};

		splitParams.each( function() {
			var keyVal = $(this).split('=');

			arrayParams[keyVal[0]] = keyVal[1];
		});

		return arrayParams;

	} else {
		return false;
	}
}

Y por último, otra función para actualizar el valor de un parámetro de la query. Busca el parámetro, cambia el valor y devuelve la url con la query cambiada.

function updateQueryParams( uri, key, value ) {
	var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
	if( value === undefined ) {
		if( uri.match( re ) ) {
		    return uri.replace( re, '$1$2' );
		} else {
		    return uri;
		}
	} else {
		if( uri.match( re ) ) {
		    return uri.replace( re, '$1' + key + "=" + value + '$2' );
		} else {
		    var hash =  '';
		    if( uri.indexOf('#') !== -1 ) {
		        hash = uri.replace(/.*#/, '#');
		        uri = uri.replace(/#.*/, '');
		    }
		    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
		    return uri + separator + key + "=" + value + hash;
		}
	}  
}

¡Espero que te sirva!

Jairo Calero

Jairo Calero

Desarrollador web frontend y backend, especialista en webs app desarrolladas en PHP y Javascript. Experto en HTML, CSS3, PHP y Javascript con frameworks y librerías como jQuery, Angular y Bootstrap. Gestor de herramientas SEO como Google Analytics, Search Console, SEMrush o Hotjar. Email marketing y Big data.

Deja tu respuesta