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
