Analizar cadena de consulta en JavaScript

1. Hipervínculo ficticio
2. Sintaxis de parseQuery

En este tutorial, observamos cómo funcionan las cadenas de consulta de análisis en JavaScript, pero antes de continuar, revisemos el historial y veamos por qué necesitamos estas cadenas de consulta en primer lugar.

Una cadena de consulta es una parte de un hipervínculo o URL que aparece justo después del signo de interrogación ? establece valores para variables conocidas como claves o parámetros, algo similar a un diccionario de python. Envía datos de una página web a otra junto con la recuperación de datos específicos de la base de datos o del servidor web.

Hipervínculo ficticio

www.mysite
    .com  // default.aspx?username=user+1&units=kgs&units=pounds&permission=false

En el hipervínculo anterior, esta parte se refiere a la consulta:

username = user + 1 & units = kgs& units = pounds& permission = false

Dicho esto, analizar significa extraer una parte de algo, y aquí estamos hablando de una cadena de consulta, lo que significa que este proceso tomará una parte de nuestra cadena de consulta y trabajará con ella. Esa cadena de consulta analizada juega un papel importante en la referencia o recuperación de solicitudes de datos.

Así es como se vería una consulta analizada:

username = user 1

Ahora veamos un ejemplo más tangible que muestra cómo JavaScript analiza la cadena de consulta del hipervínculo dado pasando por múltiples casos de prueba; En este ejemplo, nuestra función parseQuery toma el hipervínculo como argumento y escupe la consulta analizada en forma de objeto JavaScript.

Sintaxis de parseQuery

parseQuery(query)

• consulta: la cadena específica que se pasa como consulta.

function parseQuery(query) {
  object = {};

  if (query.indexOf('?') != -1) {
    query = query.split('?');
    query = query[1];
  }

  parseQuery = query.split('&');

  for (var i = 0; i < parseQuery.length; i++) {
    pair = parseQuery[i].split('=');
    key = decodeURIComponent(pair[0]);
    if (key.length == 0) continue;
    value = decodeURIComponent(pair[1].replace('+', ' '));

    if (object[key] == undefined)
      object[key] = value;
    else if (object[key] instanceof Array)
      object[key].push(value);
    else
      object[key] = [object[key], value];
  }

  return object;
};

Comencemos creando un objeto vacío, luego nuestra consulta o hipervínculo se rompe desde ? para deshacerse del exceso de URL.

Una vez hecho esto, dividimos nuestra consulta de & para obtener lo que se conoce como el atributo y su valor en forma de una lista que se itera para extraer el valor y el atributo individualmente.

Ahora, el par clave-valor verificará algunos de los casos de prueba y, finalmente, del valor restante, reemplazamos cualquier signo + con un espacio que nos brinde un valor más legible.

Repasemos nuestros casos de prueba:

Caso 1

parseQuery('username=Eren&units=kgs&permission=true');

En este caso, pasamos una consulta en lugar de una URL username=Eren&units=kgs&permission=true lo que sucederá es que se saltará el primer bloque if, y dado que hay más de un par de clave y valor, la consulta se divide , y se verifica que esta línea de código sea verdadera ya que no tenemos claves duplicadas.

if (object[key] == undefined) object[key] = value;

Producción :

{ 
    username: 'Eren', 
    units: 'kgs', 
    permission: 'true' 
}

Caso 2

parseQuery(
    'http:/www.mysite.com//default.txt?username=David+Rogers&units=kgs&permission=false');

Ahora usamos el hipervínculo completo

http: /www.mysite.com/ / default.txt ? username = David + Rogers& units =
                                                      kgs& permission = false

como argumento y la condición if dada a continuación se vuelve True y este bloque extraerá la consulta de nuestro hipervínculo

if (query.indexOf('?') != -1) {

Producción :

{ 
    username: 'David Rogers', 
    units: 'kgs', 
    permission: 'false' 
}

Caso 3

parseQuery(
    'http:/www.mysite.com//default.txt?username=user1&insect=%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B0');

Intentemos dar una URL que contenga un mensaje codificado.

http: /www.mysite.com/ / default.txt ? username = user1& insect = % D0 % B1 %
    D0 % B0 % D0 % B1 % D0 % BE % D1 % 87 % D0 % BA % D0 % B0

Hemos utilizado la función decodeURIComponent() para decodificar este mensaje.

Producción :

{ 
    username: 'user 1', 
    insect: 'бабочка' 
}

Caso 4

parseQuery(
    'http:/www.mysite.com//default.txt?username=Eren&units=kgs&permission=false&units=pounds');

Finalmente, consideramos un hipervínculo que contiene claves duplicadas

http: /www.mysite.com/ / default.txt ?
    username = Eren& units = kgs& permission = false& units = pounds

para el primer valor duplicado debajo de la línea de código se ejecutará y creará un array.

else object[key] = [object[key], value];

Después de eso, cada entrada duplicada se insertará en esta matriz.

else if (object[key] instanceof Array) object[key].push(value);

Producción :

 {
  username: 'Eren',
  units: [ 'kgs', 'pounds'],
  permission: 'false'
}