El rincón de JMACOE

¿Alguna vez se necesitan obtener los valores de cadena de consulta con JavaScript? Esta tarea suele ser una división dolorosa, dividir, dividir, iteración, indexOf hack que es realmente lento y terriblemente feo a la vista. También tiende a acumularse líneas de código muy rápido.
He aquí una manera muy dulce para analizar la cadena de consulta en un objeto de JavaScript con dos líneas de código usando expresiones regulares para rellenar un objeto. Descubrí este truco hace algunos años y lo archive en mi carpeta de fragmentos de código.

El Código

El código JavaScript se utiliza el método replace() con una expresión regular para apuntar los pares nombre/valor en la cadena URI que estás trabajando. El valor replace es realmente una función que se ejecutará para cada par. Esta pequeña función simplemente empuja el par nombre/valor en el objeto queryString.

var queryString = {};
anchor.href.replace(
	new RegExp("([^?=&]+)(=([^&]*))?", "g"),
	function($0, $1, $2, $3) { queryString[$1] = $3; }
);

¿No es hermoso? en este ejemplo anchor es una etiqueta anchor en una página que ya he definido con un document.getElementById. Sin embargo funciona igual de bien con window.location.href

Usandolo

Con este sencillo truco podrás acceder a los parámetros de la cadena de consulta diciendo queryString[‘name’]. Digamos que su URI se parece a esto:

http://your.domain/product.aspx?category=4&product_id=2140&query=lcd+tv

Quiere el Id del producto? Simple,
queryString[‘product_id’] retornará «2140″. bonito y simple.

Si el parámetro de la cadena de consulta que esta buscando no existe entonces retornara undefined sin lanzar un error.

Ejemplo completo

Copia y pega esto en tu consola Firebug y ejecuta para verlo en acción:

var uri = 'http://your.domain/product.aspx?category=4&product_id=2140&query=lcd+tv';
var queryString = {};
uri.replace(
	new RegExp("([^?=&]+)(=([^&]*))?", "g"),
	function($0, $1, $2, $3) { queryString[$1] = $3; }
);
console.log('Product ID: ' + queryString['product_id']);     // Product ID: 2140
console.log('Product Name: ' + queryString['product_name']); // Product Name: undefined
console.log('Product Category: ' + queryString['category']); // Product Category: 4