tablas - Cadena de consulta de JavaScript

obtener datos de una tabla html javascript

Question

¿Hay alguna biblioteca de JavaScript que haga un diccionario de la cadena de consulta, estilo ASP.NET ?

Algo que se puede usar como:

var query = window.location.querystring["query"]?

¿La "cadena de consulta" se llama algo más fuera del dominio .NET ? ¿Por qué no se divide location.search en una colección de clave / valor ?

EDITAR : He escrito mi propia función, pero ¿alguna de las principales bibliotecas de JavaScript hace esto?

Answer 1

tl; dr solución en una sola línea (ish) de código usando vainilla javascript

var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {
    queryDict[item.split("=")[0]] = item.split("=")[1]
})

Para querystring ?a=1&b=2&c=3&d&e devuelve:

> queryDict
a: "1"
b: "2"
c: "3"
d: undefined
e: undefined

llaves de múltiples valores y caracteres codificados ?

Consulte la respuesta original en ¿Cómo puedo obtener valores de cadena de consulta en JavaScript?

"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> queryDict
a: ["1", "5", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

Answer 2

El código

Este Gist de Eldon McGuinness es, de lejos, la implementación más completa de un analizador de cadenas de consulta JavaScript que he visto hasta ahora.

Lamentablemente, está escrito como un complemento jQuery.

Lo reescribí en JS vainilla e hice algunas mejoras:

function parseQuery(str) {
  var qso = {};
  var qs = (str || document.location.search);
  // Check for an empty querystring
  if (qs == "") {
    return qso;
  }
  // Normalize the querystring
  qs = qs.replace(/(^/?)/, '''').replace(/;/g, ''&'');
  while (qs.indexOf("&&") != -1) {
    qs = qs.replace(/&&/g, ''&'');
  }
  qs = qs.replace(/([/&]+$)/, '''');
  // Break the querystring into parts
  qs = qs.split("&");
  // Build the querystring object
  for (var i = 0; i < qs.length; i++) {
    var qi = qs[i].split("=");
    qi = qi.map(function(n) {
      return decodeURIComponent(n)
    });
    if (typeof qi[1] === "undefined") {
      qi[1] = null;
    }
    if (typeof qso[qi[0]] !== "undefined") {

      // If a key already exists then make this an object
      if (typeof (qso[qi[0]]) == "string") {
        var temp = qso[qi[0]];
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]] = [];
        qso[qi[0]].push(temp);
        qso[qi[0]].push(qi[1]);

      } else if (typeof (qso[qi[0]]) == "object") {
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]].push(qi[1]);
      }
    } else {
      // If no key exists just set it as a string
      if (qi[1] == "") {
        qi[1] = null;
      }
      qso[qi[0]] = qi[1];
    }
  }
  return qso;
}

Cómo usarlo

var results = parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab");

Salida

{
  "foo": ["bar", "boo" ],
  "roo": "bar",
  "bee": "bop",
  "": ["ghost", "ghost2"],
  "checkbox[]": ["b1", "b2"],
  "dd": null,
  "http": [
    "http://w3schools.com/my test.asp?name=ståle&car=saab",
    "http://w3schools2.com/my test.asp?name=ståle&car=saab"
  ]
}

Ver también este violín .

Answer 3

De acuerdo, ya que todos ignoran mi pregunta real, ¡yo también publicaré la mía! Esto es lo que tengo:

location.querystring = (function() {

    // The return is a collection of key/value pairs

    var queryStringDictionary = {};

    // Gets the query string, starts with ''?''

    var querystring = unescape(location.search);

    // document.location.search is empty if no query string

    if (!querystring) {
        return {};
    }

    // Remove the ''?'' via substring(1)

    querystring = querystring.substring(1);

    // ''&'' seperates key/value pairs

    var pairs = querystring.split("&");

    // Load the key/values of the return collection

    for (var i = 0; i < pairs.length; i++) {
        var keyValuePair = pairs[i].split("=");
        queryStringDictionary[keyValuePair[0]] = keyValuePair[1];
    }

    // Return the key/value pairs concatenated

    queryStringDictionary.toString = function() {

        if (queryStringDictionary.length == 0) {
            return "";
        }

        var toString = "?";

        for (var key in queryStringDictionary) {
            toString += key + "=" + queryStringDictionary[key];
        }

        return toString;
    };

    // Return the key/value dictionary

    return queryStringDictionary;
})();

Y las pruebas:

alert(window.location.querystring.toString());

for (var key in location.querystring) {
    alert(key + "=" + location.querystring[key]);
}

Mente que pensaste, JavaScript no es mi lengua materna.

De todos modos, estoy buscando una biblioteca de JavaScript (por ejemplo, jQuery, Prototype) que ya tenga una escrita. :)

Answer 4

Después de encontrar esta publicación, al mirarme a mí mismo, pensé que debería agregar que no creo que la solución más votada sea la mejor. No maneja valores de matriz (como? A = foo & a = bar; en este caso, esperaría que a devuelva [''foo'', ''bar'']). También, por lo que puedo decir, no tiene en cuenta los valores codificados, como la codificación de caracteres hexadecimales donde% 20 representa un espacio (ejemplo:? A = Hello% 20World) o el símbolo más que se utiliza para representar un espacio (ejemplo :? a = Hola + Mundo).

Node.js ofrece lo que parece una solución muy completa para el análisis de cadena de consulta. Sería fácil de sacar y usar en su propio proyecto ya que está bastante bien aislado y bajo una licencia permisiva.

El código para ello se puede ver aquí: https://github.com/joyent/node/blob/master/lib/querystring.js

Las pruebas que tiene Node se pueden ver aquí: https://github.com/joyent/node/blob/master/test/simple/test-querystring.js Sugeriría probar algunas de estas con la popular respuesta para ver cómo funciona los maneja

También hay un proyecto en el que participé para agregar específicamente esta funcionalidad. Es un puerto del módulo de análisis de cadena de consulta de lib estándar de Python. Mi tenedor se puede encontrar aquí: https://github.com/d0ugal/jquery.qeeree

Answer 5

Función que escribí para un requisito similar a esto con la manipulación de cadenas de javascript puro

"http://www.google.lk/?Name=John&Age=20&Gender=Male"

function queryize(sampleurl){
    var tokens = url.split(''?'')[1].split(''&'');
    var result = {};

    for(var i=0; i<tokens.length; i++){
        result[tokens[i].split(''='')[0]] = tokens[i].split(''='')[1];
    }

    return result;
}

Uso:

queryize(window.location.href)[''Name''] //returns John
queryize(window.location.href)[''Age''] //returns 20
queryize(window.location.href)[''Gender''] //returns Male

Answer 6

O puede usar la biblioteca sugar.js .

Desde sugarjs.com:

Object.fromQueryString (str , profundo = verdadero )

Convierte la cadena de consulta de una URL en un objeto. Si deep es falso, la conversión solo aceptará params poco profundos (es decir, ningún objeto o matrices con sintaxis [] ya que estos no son universalmente compatibles.

Object.fromQueryString(''foo=bar&broken=wear'') >{"foo":"bar","broken":"wear"}
Object.fromQueryString(''foo[]=1&foo[]=2'') >{"foo":[1,2]}

Ejemplo:

var queryString = Object.fromQueryString(location.search);
var foo = queryString.foo;

Answer 7

Puede extraer los pares clave / valor de la propiedad location.search , esta propiedad tiene la parte de la URL que sigue a? símbolo, incluido el? símbolo.

function getQueryString() {
  var result = {}, queryString = location.search.slice(1),
      re = /([^&=]+)=([^&]*)/g, m;

  while (m = re.exec(queryString)) {
    result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }

  return result;
}

// ...
var myParam = getQueryString()["myParam"];

Answer 8

Si está utilizando lodash + ES6, aquí hay una solución de una sola línea: _.object(window.location.search.replace(/(^/?)/, '''').split(''&'').map(keyVal => keyVal.split(''='')));

Answer 9

Si tiene la cadena de consulta a mano, use esto:

 /**
 * @param qry the querystring
 * @param name name of parameter
 * @returns the parameter specified by name
 * @author [email protected]
 */

function getQueryStringParameter(qry,name){
    if(typeof qry !== undefined && qry !== ""){
        var keyValueArray = qry.split("&");
        for ( var i = 0; i < keyValueArray.length; i++) {
            if(keyValueArray[i].indexOf(name)>-1){
                return keyValueArray[i].split("=")[1];
            }
        }
    }
    return "";
}

Answer 10

Sobre la base de la respuesta de @CMS, tengo lo siguiente (en CoffeeScript que se puede convertir fácilmente a JavaScript):

String::to_query = ->
  [result, re, d] = [{}, /([^&=]+)=([^&]*)/g, decodeURIComponent]
  while match = re.exec(if @.match /^/?/ then @.substring(1) else @)
    result[d(match[1])] = d match[2] 
  result

Puede agarrar fácilmente lo que necesita con:

location.search.to_query()[''my_param'']

La victoria aquí es una interfaz orientada a objetos (en lugar de funcional) y se puede hacer en cualquier cadena (no solo location.search).

Si ya está utilizando una biblioteca de JavaScript, esta función ya existe. Por ejemplo, aquí está la versión de Prototype

Answer 11

Tal vez http://plugins.jquery.com/query-object/ ?

Este es el tenedor de la misma https://github.com/sousk/jquery.parsequery#readme .

Answer 12

Vale la pena señalar que la biblioteca que John Slegers mencionó tiene una dependencia jQuery, sin embargo, aquí hay una versión que es vainilla Javascript.

https://github.com/EldonMcGuinness/querystring.js

Simplemente habría comentado en su publicación, pero me falta la reputación de hacerlo. : /

Ejemplo:

El siguiente ejemplo procesa la siguiente cadena de consulta, aunque irregular:

?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab 

var qs = "?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab";
//var qs = "?=&=";
//var qs = ""

var results = querystring(qs);

(document.getElementById("results")).innerHTML =JSON.stringify(results, null, 2);

<script 
src="https://rawgit.com/EldonMcGuinness/querystring.js/master/dist/querystring.min.js"></script>
<pre id="results">RESULTS: Waiting...</pre>

Answer 13

Me gusta mantenerlo simple, legible y pequeño.

function searchToObject(search) {
    var pairs = search.substring(1).split("&"),
        obj = {}, pair;

    for (var i in pairs) {
        if (pairs[i] === "") continue;
        pair = pairs[i].split("=");
        obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
    return obj;
}

searchToObject(location.search);

Ejemplo:

searchToObject(''?query=myvalue'')[''query'']; // spits out: ''myvalue''

Answer 14

function decode(s) {
    try {
        return decodeURIComponent(s).replace(//r/n|/r|/n/g, "/r/n");
    } catch (e) {
        return "";
    }
}
function getQueryString(win) {
    var qs = win.location.search;
    var multimap = {};
    if (qs.length > 1) {
        qs = qs.substr(1);
        qs.replace(/([^=&]+)=([^&]*)/g, function(match, hfname, hfvalue) {
            var name = decode(hfname);
            var value = decode(hfvalue);
            if (name.length > 0) {
                if (!multimap.hasOwnProperty(name)) {
                    multimap[name] = [];
                }
                multimap[name].push(value);
            }
        });
    }
    return multimap;
}
var keys = getQueryString(window);
for (var i in keys) {
    if (keys.hasOwnProperty(i)) {
        for (var z = 0; z < keys[i].length; ++z) {
            alert(i + ":" + keys[i][z]);
        }
    }
}

Answer 15

// How about this
function queryString(qs) {
    var queryStr = qs.substr(1).split("&"),obj={};
    for(var i=0; i < queryStr.length;i++)
        obj[queryStr[i].split("=")[0]] = queryStr[i].split("=")[1];
    return obj;
}

// Usage:
var result = queryString(location.search);