Abrufen von URL-Werten für Abfragezeichenfolgenparameter mit jQuery / Javascript (Querystring)

149

Kennt jemand eine gute Möglichkeit, eine jQuery-Erweiterung zu schreiben, um Abfragezeichenfolgenparameter zu verarbeiten? Grundsätzlich möchte ich die magische jQuery- ($)Funktion erweitern, damit ich so etwas tun kann:

$('?search').val(); 

Welches würde mir den Wert "Test" in der folgenden URL geben : http://www.example.com/index.php?search=test.

Ich habe viele Funktionen gesehen, die dies in jQuery und Javascript tun können, aber ich möchte jQuery tatsächlich so erweitern, dass es genau so funktioniert, wie es oben gezeigt wird. Ich suche kein jQuery-Plugin, sondern eine Erweiterung der jQuery-Methode.

TroySteven
quelle
4
Gefragt und beantwortet: stackoverflow.com/questions/901115/…
Nico Westerdale
1
@NicoWesterdale - Ich habe diesen Link durchgesehen, aber keine Antworten gefunden, die diese spezielle Frage lösen. Er sagte, er will genau wie oben.
Mrtsherman
2
Ich glaube nicht, dass Sie dies tun können. Eine übergebene Zeichenfolge wird von sizzler analysiert und dann in ein Array von DOM-Objekten aufgelöst. Sie können den Matcher erweitern, um benutzerdefinierte Filter bereitzustellen, aber Sie können kein jquery-Objekt haben, das auf einer Zeichenfolge basiert.
Andrew
6
Ist nicht $genug überladen?
Quentin
1
@mrtsherman Sehen Sie sich die Funktion getParameterByName () in dem von mir angegebenen Link an. Nein, Sie können dies nicht direkt innerhalb einer $ -Aufforderung tun, aber dafür sind jQuery-Selektoren nicht gedacht. Er wählt nur einen Teil einer URL-Zeichenfolge aus und versucht nicht, auf einen Teil des DOM zuzugreifen, was $ () tut. Es ist eine ganz andere Sache. Wenn Sie jQuery wirklich verwenden möchten, können Sie ein Plugin schreiben, das diese Syntax verwendet: $ .getParameterByName (param). Weiter unten auf der Seite, auf die ich verlinkt habe, finden Sie genau das. Ein bisschen sinnlos.
Nico Westerdale

Antworten:

46

Nach Jahren hässlichen String-Parsens gibt es einen besseren Weg: URLSearchParams Schauen wir uns an, wie wir diese neue API verwenden können, um Werte vom Speicherort abzurufen !

// Angenommen "? Post = 1234 & action = edit"

var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?

post=1234&action=edit&active=1"

UPDATE: IE wird nicht unterstützt

Verwenden Sie diese Funktion aus einer Antwort unten anstelle von URLSearchParams

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('action')); //edit
Saurin
quelle
1
Wird URLSearchParams von allen Browsern unterstützt?
göttlicher
Hoppla! ohh man, IE wird nicht unterstützt !! Ich habe es gerade getestet. Während Chrome, FF, Safari kein Problem hat.
Saurin
1
@ Divine - Es gibt eine Polyfüllung für URLSearchParams hier: github.com/WebReflection/url-search-params
Roberto
Wenn Sie eine Polyfüllung für nicht unterstützte Browser hinzufügen, funktioniert diese URLSearchParams-Lösung gut. github.com/ungap/url-search-params
Louisvdw
104

Warum jQuery erweitern? Was wäre der Vorteil einer Erweiterung von jQuery gegenüber einer globalen Funktion?

function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
    var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
    return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}

http://jsfiddle.net/gilly3/sgxcL/

Ein alternativer Ansatz wäre, die gesamte Abfragezeichenfolge zu analysieren und die Werte zur späteren Verwendung in einem Objekt zu speichern. Dieser Ansatz erfordert keinen regulären Ausdruck und erweitert das window.locationObjekt (könnte aber genauso gut eine globale Variable verwenden):

location.queryString = {};
location.search.substr(1).split("&").forEach(function (pair) {
    if (pair === "") return;
    var parts = pair.split("=");
    location.queryString[parts[0]] = parts[1] &&
        decodeURIComponent(parts[1].replace(/\+/g, " "));
});

http://jsfiddle.net/gilly3/YnCeu/

Diese Version nutzt auch Array.forEach(), was nativ in IE7 und IE8 nicht verfügbar ist. Es kann mithilfe der Implementierung bei MDN hinzugefügt werden , oder Sie können $.each()stattdessen jQuery's verwenden.

gilly3
quelle
2
Es ist nicht üblich, aber es ist gültig, Semikolons anstelle von kaufmännischem Und in den Abfrageparametern zu verwenden.
Muhd
@Muhd - Es ist "gültig", ein beliebiges Trennzeichen in einem Querystring zu verwenden, solange Ihr Code dies versteht. Wenn jedoch ein Formular gesendet wird, werden die Formularfelder name=valuepaarweise getrennt durch &. Wenn Ihr Code ein benutzerdefiniertes Querystring-Format verwendet, müssen Sie natürlich einen benutzerdefinierten Querystring-Parser schreiben, wo immer der Querystring verwendet wird, egal ob auf dem Server oder dem Client.
gilly3
2
@nick - Interessant. Ihr Vorschlag für HTTP-Server, Semikolons als kaufmännisches Und zu behandeln, dient jedoch nur dazu, HTML hübscher zu machen, wenn ein Link zum Nachahmen einer Formularübermittlung verwendet wird. Es ist nur ein Vorschlag und nicht Standard. Eine Standardformularübermittlung GETwird als codiert application/x-www-form-urlencoded, wobei die Werte durch getrennt sind &. Mein Code behandelt diesen Standard. Benutzerdefinierte URL-Strukturen wie die von Ihnen verknüpfte benötigen einen benutzerdefinierten Parser für Server und Client. Unabhängig davon wäre es trivial, meinem obigen Code eine solche Funktion hinzuzufügen.
Gilly3
1
@gilly in der Tat - wenn Sie tragbaren Code wollen, müssen Sie beide unterstützen
Nick
1
Fügen Sie "i" zu RegExp () hinzu, damit der Schlüssel nicht zwischen Groß- und Kleinschreibung unterscheidet: new RegExp ("[? &]" + Key + "= ([^ &] +) (& | $)", "i"));
Yovav
94

JQuery jQuery-URL-Parser Plugin die gleiche Arbeit, zum Beispiel den Wert abrufen Suche Query - String param, können Sie

$.url().param('search');

Diese Bibliothek wird nicht aktiv gepflegt. Wie vom Autor desselben Plugins vorgeschlagen, können Sie URI.js verwenden .

Oder Sie können stattdessen js-url verwenden. Es ist ziemlich ähnlich zu dem unten.

So können Sie auf den Abfrageparameter wie zugreifen $.url('?search')

RameshVel
quelle
2
Nett. Und der Code ist gemeinfrei, sodass Sie nicht einmal die Kommentare einfügen müssen.
Muhd
4
Gute Lösung, funktioniert aber nicht, wenn Sie zufällig per Datei testen: //
kampsj
1
Was hat das zu tun, @kampsj
RameshVel
3
Hallo @kampsj, das Testen mit dem file://Protokoll führt dazu, dass viel mehr Dinge nicht funktionieren. Mit node.js können Sie einen sehr schnellen und einfachen statischen HTML-Server erstellen. stackoverflow.com/questions/16333790/…
Jess
2
Dieses Plugin wird nicht mehr gepflegt und der Autor selbst schlägt vor, stattdessen andere Plugins zu verwenden.
JanErikGunnar
77

Fand dieses Juwel von unseren Freunden bei SitePoint. https://www.sitepoint.com/url-parameters-jquery/ .

Verwenden von PURE jQuery. Ich habe das gerade benutzt und es hat funktioniert. Zum Beispiel ein bisschen optimiert.

//URL is http://www.example.com/mypage?ref=registration&[email protected]

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);

    return (results !== null) ? results[1] || 0 : false;
}

console.log($.urlParam('ref')); //registration
console.log($.urlParam('email')); //[email protected]

Verwenden Sie, wie Sie wollen.

ClosDesign
quelle
Toll. Vielen Dank! Ich glaube nicht, dass Sie das letzte schließende Klammer-Tag brauchen.
Bhtabor
Ahh ja, du hast recht. Den Beitrag bearbeitet. Das blieb von einer if-Anweisung in meinem Code übrig. Vielen Dank.
ClosDesign
1
Sie sollten window.location.search anstelle von .href verwenden - ansonsten gut.
BrainSlugs83
4
Stattdessen results[1] || 0müssen Sie tun, wenn (results) {return results [1]} return 0; bcoz-Abfrageparameter sind möglicherweise überhaupt nicht vorhanden. Durch Ändern werden alle allgemeinen Fälle behandelt.
myDoggyWritesCode
1
Was machst du, wenn du so etwas hast https://example.com/?c=Order+ID? Dieses Pluszeichen bleibt bei dieser Funktion erhalten.
Volomike
47

Dies ist nicht mein Codebeispiel, aber ich habe es in der Vergangenheit verwendet.

//First Add this to extend jQuery

    $.extend({
      getUrlVars: function(){
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
          hash = hashes[i].split('=');
          vars.push(hash[0]);
          vars[hash[0]] = hash[1];
        }
        return vars;
      },
      getUrlVar: function(name){
        return $.getUrlVars()[name];
      }
    });

    //Second call with this:
    // Get object of URL parameters
    var allVars = $.getUrlVars();

    // Getting URL var by its name
    var byName = $.getUrlVar('name');
Rob Nield
quelle
2
Sie sollten nicht auf '=' teilen, es ist technisch in Ordnung, ein zweites Gleichheitszeichen im Wert eines Schlüssel / Wert-Paares zu haben. - Nur das erste Gleichheitszeichen (pro Schlüssel / Wert-Paar) sollte als Trennzeichen behandelt werden. (Auch das Gleichheitszeichen ist nicht unbedingt erforderlich; es ist möglich, einen Schlüssel ohne Wert zu haben.)
BrainSlugs83
Saubere Lösung. Hat in meinem Fall perfekt funktioniert.
JF Gagnon
$ .extend ({getUrlVars: function () {var vars = [], Hash; var hashes = window.location.href.slice (window.location.href.indexOf ('?') + 1) .split ('& '); für (var i = 0; i <hashes.length; i ++) {hash = hashes [i] .split (' = '); var k = hash.shift (); vars.push (k); vars [k] = hash.join ("");} return vars;}, getUrlVar: function (name) {return $ .getUrlVars () [name];}});
Mupinc
15

Ich habe eine kleine Funktion geschrieben, bei der Sie nur den Namen des Abfrageparameters analysieren müssen. Wenn Sie also :? Project = 12 & Mode = 200 & date = 2013-05-27 haben und den Parameter 'Mode' möchten, müssen Sie nur den Namen 'Mode' in die Funktion analysieren:

function getParameterByName( name ){
    var regexS = "[\\?&]"+name+"=([^&#]*)", 
  regex = new RegExp( regexS ),
  results = regex.exec( window.location.search );
  if( results == null ){
    return "";
  } else{
    return decodeURIComponent(results[1].replace(/\+/g, " "));
  }
}

// example caller:
var result =  getParameterByName('Mode');
Plippie
quelle
Wenn Ihr Name keinen Müll enthält, können Sie die erste Regex
löschen
7

Aufbauend auf der obigen Antwort von @Rob Neild ist hier eine reine JS-Anpassung, die ein einfaches Objekt dekodierter Abfragezeichenfolgenparameter (keine% 20 usw.) zurückgibt.

function parseQueryString () {
  var parsedParameters = {},
    uriParameters = location.search.substr(1).split('&');

  for (var i = 0; i < uriParameters.length; i++) {
    var parameter = uriParameters[i].split('=');
    parsedParameters[parameter[0]] = decodeURIComponent(parameter[1]);
  }

  return parsedParameters;
}

quelle
Ich habe keine Fehler bei der Verwendung dieses Codes gesehen. Welchen Browser verwenden Sie? Ich habe es gegen aktuelle Firefox, Chrome und Safari getestet.
Ja, tut mir leid, dass ich es falsch gelesen habe. Ich dachte, ich hätte gesehen, dass es eine Methode für etwas aufruft, das undefiniert zurückgibt. Es läuft also wirklich nur einmal, wenn es nicht muss. Bei der Suche ist "". Und Sie erhalten {"": "undefined"}
Jerinaw
Ja. Das könnte wahrscheinlich etwas verfeinert werden.
1

Geschrieben in Vanilla Javascript

     //Get URL
     var loc = window.location.href;
     console.log(loc);
     var index = loc.indexOf("?");
     console.log(loc.substr(index+1));
     var splitted = loc.substr(index+1).split('&');
     console.log(splitted);
     var paramObj = [];
     for(var i=0;i<splitted.length;i++){
         var params = splitted[i].split('=');
         var key = params[0];
         var value = params[1];
         var obj = {
             [key] : value
         };
         paramObj.push(obj);
         }
    console.log(paramObj);
    //Loop through paramObj to get all the params in query string.
manischer Prasad
quelle
1
function parseQueryString(queryString) {
    if (!queryString) {
        return false;
    }

    let queries = queryString.split("&"), params = {}, temp;

    for (let i = 0, l = queries.length; i < l; i++) {
        temp = queries[i].split('=');
        if (temp[1] !== '') {
            params[temp[0]] = temp[1];
        }
    }
    return params;
}

Ich benutze das.

Donvercety
quelle