Czy istnieje biblioteka JavaScript, która tworzy słownik z ciągu zapytania, ASP.NET stylu?

Coś, czego można użyć, na przykład:

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

Czy „ciąg zapytania” nazywa się czymś spoza .NETdziedziny? Dlaczego nie jest location.searchpodzielony na kolekcję kluczy / wartości ?

EDYCJA : Napisałem własną funkcję, ale czy robi to jakakolwiek większa biblioteka JavaScript?

Może http://plugins.jquery.com/query-object/ ?

To jest jego rozwidlenie https://github.com/sousk/jquery.parsequery#readme .

Możesz wyodrębnić pary klucz / wartość z pliku właściwości location.search , ta właściwość ma część adresu URL następującą po znaku? symbol, w tym? symbol.

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"];

tl; dr rozwiązanie w pojedynczym (ish) wierszu kodu przy użyciu zwykłego javascript

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

W przypadku zapytania ?a=1&b=2&c=3&d&ezwraca:

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

klucze wielowartościowe i zakodowane znaki ?

Zobacz oryginalną odpowiedź w artykule Jak uzyskać wartości ciągu zapytania w języku 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"]

Po znalezieniu tego posta, patrząc na siebie, pomyślałem, że powinienem dodać, że nie sądzę, aby rozwiązanie, które uzyskało najwięcej głosów, jest najlepsze. Nie obsługuje wartości tablicowych (takich jak? A = foo & a = bar - w tym przypadku spodziewałbym się zwrócenia a ['foo', 'bar']). O ile wiem, nie bierze pod uwagę zakodowanych wartości - takich jak kodowanie znaków szesnastkowych, gdzie% 20 reprezentuje spację (przykład:? A = Hello% 20World) lub symbol plus używany do reprezentowania spacji (przykład :? a = Hello + World).

Node.js oferuje coś, co wygląda na bardzo kompletne rozwiązanie do analizowania zapytań. Byłby łatwy do wyjęcia i wykorzystania we własnym projekcie, ponieważ jest on dość dobrze odizolowany i podlega liberalnej licencji.

Kod do tego można obejrzeć tutaj: https://github.com/joyent/node/blob/master/lib/querystring.js

Testy, które przeprowadził Node, można zobaczyć tutaj: https://github.com/joyent/node/blob/master/test/simple/test-querystring.js Sugerowałbym wypróbowanie niektórych z nich z popularną odpowiedzią, aby zobaczyć, jak to obsługuje je.

Jest też projekt, w którym byłem zaangażowany, aby specjalnie dodać tę funkcjonalność. Jest to port standardowego modułu analizującego łańcuchy zapytań lib w języku Python. Mój widelec można znaleźć tutaj: https://github.com/d0ugal/jquery.qeeree

Możesz też skorzystać z biblioteki sugar.js .

Z sugarjs.com:

Object.fromQueryString (str , deep = true )

Konwertuje ciąg zapytania adresu URL na obiekt. Jeśli deep jest fałszywe, konwersja będzie akceptować tylko płytkie parametry (tj. Żaden obiekt lub tablice ze składnią []), ponieważ nie są one powszechnie obsługiwane.

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

Przykład:

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

Jeśli masz pod ręką querystring, użyj tego:

 /**
 * @param qry the querystring
 * @param name name of parameter
 * @returns the parameter specified by name
 * @author eduardo.medeirospereira@gmail.com
 */

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 "";
}

// 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);

Warto zauważyć, że biblioteka, o której wspomniał John Slegers, ma zależność od jQuery, jednak tutaj jest wersja, która jest zwykłym Javascriptem.

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

Po prostu skomentowałbym jego post, ale brakuje mi do tego reputacji. : /

Przykład:

Poniższy przykład przetwarza następujący, choć nieregularny, ciąg zapytania:

?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>

Kod

This Gist autorstwa Eldona McGuinnessa jest zdecydowanie najbardziej kompletną implementacją parsera ciągu zapytań JavaScript, jaką widziałem do tej pory.

Niestety jest napisany jako wtyczka jQuery.

Przepisałem go na waniliowy JS i wprowadziłem kilka ulepszeń:

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;
}

Jak tego użyć

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");

Wynik

{
  "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"
  ]
}

Zobacz także to Fiddle .

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]);
        }
    }
}

Lubię, gdy jest to proste, czytelne i małe.

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);

Przykład:

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

Funkcja, którą napisałem dla wymagania podobnego do tego z czystą manipulacją ciągiem javascript

"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;
}

Stosowanie:

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

Jeśli używasz lodash + ES6, oto jedno liniowe rozwiązanie: _.object(window.location.search.replace(/(^\?)/, '').split('&').map(keyVal => keyVal.split('=')));

Okay, ponieważ wszyscy ignorują moje rzeczywiste pytanie, heh, moje też opublikuję! Oto co mam:

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;
})();

A testy:

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

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

Pamiętaj, że JavaScript nie jest moim językiem ojczystym.

W każdym razie szukam biblioteki JavaScript (np. JQuery, Prototype), która ma już napisaną. :)

Opierając się na odpowiedzi @CMS, mam następujące elementy (w CoffeeScript, który można łatwo przekonwertować na 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

Możesz łatwo pobrać to, czego potrzebujesz, dzięki:

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

Tutaj wygrywa interfejs zorientowany obiektowo (zamiast funkcjonalnego) i można to zrobić na dowolnym ciągu znaków (nie tylko na location.search).

Jeśli korzystasz już z biblioteki JavaScript, ta funkcja już istnieje. Na przykład tutaj jest wersja Prototype