Obtener parámetros GET de la URL con JavaScript

¿Quieres obtener uno o varios parámetros (variables) desde la URL con JavaScript?

Vamos a ver dos funciones JavaScript muy sencillas que nos permiten obtener los parámetros de una URL.

1.Primera función.

Obteniendo parámetros de la URL desde JS

La siguiente función devuelve todos los parámetros de la URL como si fuera un objeto.

function getAllUrlParams(url) {

  // get query string from url (optional) or window
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

  // we'll store the parameters here
  var obj = {};

  // if query string exists
  if (queryString) {

    // stuff after # is not part of query string, so get rid of it
    queryString = queryString.split('#')[0];

    // split our query string into its component parts
    var arr = queryString.split('&');

    for (var i=0; i<arr.length; i++) {
      // separate the keys and the values
      var a = arr[i].split('=');

      // in case params look like: list[]=thing1&list[]=thing2
      var paramNum = undefined;
      var paramName = a[0].replace(/\[\d*\]/, function(v) {
        paramNum = v.slice(1,-1);
        return '';
      });

      // set parameter value (use 'true' if empty)
      var paramValue = typeof(a[1])==='undefined' ? true : a[1];

      // (optional) keep case consistent
      paramName = paramName.toLowerCase();
      paramValue = paramValue.toLowerCase();

      // if parameter name already exists
      if (obj[paramName]) {
        // convert value to array (if still string)
        if (typeof obj[paramName] === 'string') {
          obj[paramName] = [obj[paramName]];
        }
        // if no array index number specified...
        if (typeof paramNum === 'undefined') {
          // put the value on the end of the array
          obj[paramName].push(paramValue);
        }
        // if array index number specified...
        else {
          // put the value at that index number
          obj[paramName][paramNum] = paramValue;
        }
      }
      // if param name doesn't exist yet, set it
      else {
        obj[paramName] = paramValue;
      }
    }
  }

  return obj;
}

Supongamos que quisieras obtener los parámetros de la siguiente URL:

Podriamos obtener los parámetros asi de facil:

getAllUrlParams().product; // 'shirt'
getAllUrlParams().color; // 'blue'
getAllUrlParams().newuser; // true
getAllUrlParams().nonexistent; // undefined
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'

Cosas a saber antes de usar esta función

• La función asume que los parámetros están separados por el &carácter, como se indica en las especificaciones del W3C . Sin embargo, el formato del parámetro de URL en general no está claramente definido , por lo que de vez en cuando puede ver ;o como separadores .&
• La función sigue funcionando si un parámetro no tiene un signo de igual o si tiene un signo igual pero no tiene valor.
• Los valores de los parámetros duplicados se ponen en un array.

2. Segunda función

Esta otra función nos puede ser igualmente útil. Simplemente hay que indicarle por el argumento el id del parámetro que queremos obtener, eso si, de la URL actual. Aunque no debería suponernos ningún problema modificarla para que realizase la búsqueda en cualquier URL que quisieramos analizar en lugar de solamente la URL actual.

// Obtiene el parametro GET con el id pasado
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Fuente: sitepoing.com