Query-String in JavaScript analysieren

Question

Ich muss die Abfragezeichenfolge www.mysite.com/default.aspx?dest=aboutus.aspx analysieren. Wie bekomme ich die Variable dest in JavaScript?

Answer 1

Hier ist eine schnelle und einfache Möglichkeit, Abfragezeichenfolgen in JavaScript zu parsen:

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (decodeURIComponent(pair[0]) == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
    console.log('Abfragevariable %s nicht gefunden', variable);
}

Jetzt senden Sie eine Anfrage an page.html?x=Hallo:

console.log(getQueryVariable('x'));

Answer 2

function parseQuery(queryString) {
    var query = {};
    var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
    }
    return query;
}

Wandelt eine Abfragezeichenfolge wie hello=1&another=2 in ein Objekt {hello: 1, another: 2} um. Von dort aus ist es einfach, die benötigte Variable zu extrahieren.

Trotzdem behandelt es keine Array-Fälle wie "hello=1&hello=2&hello=3". Um damit zu arbeiten, müssen Sie überprüfen, ob eine Eigenschaft des Objekts, das Sie erstellen, bereits existiert, bevor Sie sie hinzufügen, und den Wert davon in ein Array umwandeln, um zusätzliche Teile hinzuzufügen.

Answer 3

Sie können auch die ausgezeichnete URI.js Bibliothek von Rodney Rehm verwenden. So geht's:-

var qs = URI('www.mysite.com/default.aspx?dest=aboutus.aspx').query(true); // == { dest : 'aboutus.aspx' }
    alert(qs.dest); // == aboutus.aspx

---

Und um den Query-String der aktuellen Seite zu analysieren:-

var $_GET = URI(document.URL).query(true); // ala PHP
    alert($_GET['dest']); // == aboutus.aspx

Answer 4

Ich auch! http://jsfiddle.net/drzaus/8EE8k/

(Hinweis: ohne ausgeklügelte verschachtelte oder Duplikat-Prüfung)

deparam = (function(d,x,params,p,i,j) {
return function (qs) {
    // Start-Bucket; kann nicht betrügen, indem es in der Scope-Deklaration gesetzt wird oder es überschreibt
    params = {};
    // Vorangestelltes Nicht-Query-String entfernen, Leerzeichen korrigieren und aufteilen
    qs = qs.substring(qs.indexOf('?')+1).replace(x,' ').split('&');
    // Marschieren und analysieren
    for (i = qs.length; i > 0;) {
        p = qs[--i];
        // Gleichzeichen im Wert zulassen
        j = p.indexOf('=');
        // Was ist, wenn kein Wert vorhanden ist?
        if(j === -1) params[d(p)] = undefined;
        else params[d(p.substring(0,j))] = d(p.substring(j+1));
    }

    return params;
};//--  fn  deparam
})(decodeURIComponent, /\+/g);

Und Tests:

var tests = {};
tests["einfache Parameter"] = "ID=2&first=1&second=b";
tests["vollständige URL"] = "http://blah.com/?third=c&fourth=d&fifth=e";
tests['nur ?'] = '?animal=bear&fruit=apple&building=Empire State Building&spaces=these+are+pluses';
tests['mit Gleichheitszeichen'] = 'foo=bar&baz=quux&equals=with=extra=equals&grault=garply';
tests['kein Wert'] = 'foo=bar&baz=&qux=quux';
tests['Wert auslassen'] = 'foo=bar&baz&qux=quux';

var $output = document.getElementById('output');
function output(msg) {
    msg = Array.prototype.slice.call(arguments, 0).join("\n");
    if($output) $output.innerHTML += "\n" + msg + "\n";
    else console.log(msg);
}
var results = {}; // Ergebnisse speichern, um sicherzustellen, dass wir nicht versehentlich darauf verweisen
$.each(tests, function(msg, test) {
    var q = deparam(test);
    results[msg] = q;
    output(msg, test, JSON.stringify(q), $.param(q));
    output('-------------------');
});

output('=== Bestätigung der Ergebnisse ohne Überschreibung ===');
$.each(results, function(msg, result) {
    output(msg, JSON.stringify(result));
    output('-------------------');
});

Ergebnisse in:

einfache Parameter
ID=2&first=1&second=b
{"second":"b","first":"1","ID":"2"}
second=b&first=1&ID=2
-------------------
vollständige URL
http://blah.com/?third=c&fourth=d&fifth=e
{"fifth":"e","fourth":"d","third":"c"}
fifth=e&fourth=d&third=c
-------------------
nur ?
?animal=bear&fruit=apple&building=Empire State Building&spaces=these+are+pluses
{"spaces":"these are pluses","building":"Empire State Building","fruit":"apple","animal":"bear"}
spaces=these%20are%20pluses&building=Empire%20State%20Building&fruit=apple&animal=bear
-------------------
mit Gleichheitszeichen
foo=bar&baz=quux&equals=with=extra=equals&grault=garply
{"grault":"garply","equals":"with=extra=equals","baz":"quux","foo":"bar"}
grault=garply&equals=with%3Dextra%3Dequals&baz=quux&foo=bar
-------------------
kein Wert
foo=bar&baz=&qux=quux
{"qux":"quux","baz":"","foo":"bar"}
qux=quux&baz=&foo=bar
-------------------
Wert auslassen
foo=bar&baz&qux=quux
{"qux":"quux","foo":"bar"}   <-- es ist da, ich schwöre!
qux=quux&baz=&foo=bar        <-- ...siehst du, jQuery hat es gefunden
-------------------

Answer 5

Hier ist meine Version, die lose auf der obigen Version von Braceyard basiert, aber in ein 'Wörterbuch' analysiert und die Unterstützung für Suchargumente ohne '=' bietet. Verwenden Sie es in meiner JQuery $(document).ready() Funktion. Die Argumente werden als Schlüssel/Wert-Paare in argsParsed gespeichert, die Sie vielleicht irgendwo speichern möchten...

'use strict';

function parseQuery(search) {

    var args = search.substring(1).split('&');

    var argsParsed = {};

    var i, arg, kvp, key, value;

    for (i=0; i < args.length; i++) {

        arg = args[i];

        if (-1 === arg.indexOf('=')) {

            argsParsed[decodeURIComponent(arg).trim()] = true;
        }
        else {

            kvp = arg.split('=');

            key = decodeURIComponent(kvp[0]).trim();

            value = decodeURIComponent(kvp[1]).trim();

            argsParsed[key] = value;
        }
    }

    return argsParsed;
}

parseQuery(document.location.search);