Javascript Logo
Javascript

Obtener parámetros de la URL con Javascript

Los parámetros de la URL también conocidos como «query string» o «variables de url» pueden ser útiles en muchos casos como preferencias de usuario, información de productos, landing pages (o páginas de aterrizaje) y más!

Obteniendo un parámetro de la URL

Supongamos que tenemos la siguiente URL:

https://aprendoit.com/?product=remera&color=azul&newuser&size=m

Vemos que estamos enviando 4 variables distintas en la URL las cuales son:

  • «product» con el valor «remera»
  • «color» con el valor «azul»
  • «newuser» con el valor implicito de «true»
  • «size» con el valor «m»

Ahora vamos con la magia… El código que se encuentra debajo es el que necesitamos para obtener los parámetros de la URL en un objeto!

Si, así de facil! Nosotros le pasamos una URL a la funcion y ella nos devuelve un objeto con los parámetros de la url y su valor!

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('=');

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

      // (optional) keep case consistent
      paramName = paramName.toLowerCase();
      if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

      // if the paramName ends with square brackets, e.g. colors[] or colors[2]
      if (paramName.match(/\[(\d+)?\]$/)) {

        // create key if it doesn't exist
        var key = paramName.replace(/\[(\d+)?\]/, '');
        if (!obj[key]) obj[key] = [];

        // if it's an indexed array e.g. colors[2]
        if (paramName.match(/\[\d+\]$/)) {
          // get the index value and add the entry at the appropriate position
          var index = /\[(\d+)\]/.exec(paramName)[1];
          obj[key][index] = paramValue;
        } else {
          // otherwise add the value to the end of the array
          obj[key].push(paramValue);
        }
      } else {
        // we're dealing with a string
        if (!obj[paramName]) {
          // if it doesn't exist, create property
          obj[paramName] = paramValue;
        } else if (obj[paramName] &amp;&amp; typeof obj[paramName] === 'string'){
          // if property does exist and it's a string, convert it to an array
          obj[paramName] = [obj[paramName]];
          obj[paramName].push(paramValue);
        } else {
          // otherwise add the property
          obj[paramName].push(paramValue);
        }
      }
    }
  }

  return obj;
}

Ejemplos de uso:

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

Importante:

  • Esta funcion asume que los parametros vienen separados por el carácter ampersand (&). Sin embargo, como no está claramente definido es probable que en algunas ocasiones veas «;» o «&» como separadores.
  • La funcion fnciona si un parámetro no tiene un igual (=) o si lo tiene pero no tiene un valor.
  • Los valores de los parametros duplicados se agregan en un array.

Si tu URL tiene caracteres especiales como un espacio el cual se representa como «%20».. Podes decodificarlos para obtener el valor original de la siguiente manera:

//Supongamos que tenemos test=a%20b (test=a b)
var original = getAllUrlParams().test; // 'a%20b'
var decoded = decodeURIComponent(original); // 'a b'

Solo tenemos que tener cuidado de no decodificar algo que ya esta decodificado ya que podemos diversos obtener errores en nuestro programa.

Alternativa para Navegadores Modernos

Si no necesitas que este código corra sobre viejos navegadores sería buena idea que leas y utilices URLSearchParams el cual tiene métodos que nos van a ayudar a obtener los parámetros y valores de la URL.

//URL: https://aprendoit.com/?product=remera&amp;color=azul
const urlParams = new URLSearchParams(window.location.search)
console.log(urlParams.has('product')); //true
console.log(urlParams.get('product')); //remera

También proporciona metodos de Objetos como keys(), values() y entries().

Conclusión:

El código de este artículo funciona para la mayorai de los casos comunes donde queremos obtener los valores de la consulta.

Como son cadenas de string lo ideal es utilizar Vanilla Javascript (Javascript puro) pero si quieren hacer más cosas o de manera «más sencilla» (probablemente trabajando con archivos y librerías más pesadas… no lo recomiendo!!) pueden experimentar con las siguientes librerias:

Leave a Reply

Your email address will not be published.


*