Hoe kan ik query string waarden krijgen in JavaScript?

Is er een plugin-loze manier om query string waarden op te halen via jQuery (of zonder)?

Zo ja, hoe? Zo nee, is er een plugin die dit wel kan?

Brad Larson
Bewerkte vraag 7de1 april 2015 в 12:55
Programmering
plugins query-string javascript url
23ste5 mei 2009 в 8:10
20 views
Oplossing

Update: Sep-2018

Je kunt URLSearchParams gebruiken, dat is eenvoudig en heeft fatsoenlijke (maar niet volledige) browserondersteuning.

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

Original

Je hebt jQuery niet nodig voor dat doel. Je kunt gewoon wat pure JavaScript gebruiken:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

Gebruik:

// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)


Opmerking: Als een parameter meerdere keren voorkomt (?foo=lorem&foo=ipsum), krijg je de eerste waarde (lorem). Hier is geen standaard voor en het gebruik varieert, zie bijvoorbeeld deze vraag: Autoritatieve positie van duplicate HTTP GET query keys.
OPMERKING: De functie is hoofdlettergevoelig. Als je de parameternaam liever hoofdletterongevoelig hebt, voeg 'i' modifier toe aan RegExp

Dit is een update gebaseerd op de nieuwe URLSearchParams specs om hetzelfde resultaat beknopter te bereiken. Zie antwoord met de titel "URLSearchParams" hieronder.

Martin Tournoij
Bewerkt antwoord 6de1 augustus 2019 в 7:12
Commentaren (52)

Roshambo op snipplr.com heeft een eenvoudig script om dit te bereiken beschreven in Get URL Parameters with jQuery | Improved. Met zijn script krijg je ook gemakkelijk om uit te halen alleen de parameters die u wilt.

Hier's de essentie:

$.urlParam = function(name, url) {
    if (!url) {
     url = window.location.href;
    }
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
    if (!results) { 
        return undefined;
    }
    return results[1] || undefined;
}

Dan haal je gewoon je parameters uit de query string.

Dus als de URL/query string xyz.com/index.html?lang=de was.

Roep dan gewoon var langval = $.urlParam('lang');, en je'hebt het.

UZBEKJON heeft hier ook een geweldige blog post over, Get URL parameters & values with jQuery.

Yahel
Bewerkt antwoord 4de3 februari 2016 в 6:51
Commentaren (3)

Als je jQuery gebruikt, kun je een bibliotheek gebruiken, zoals jQuery BBQ: Back Button &; Query Library.

...jQuery BBQ biedt een volledige .deparam() methode, samen met zowel hash state management, en fragment / query string parse en merge utility methoden.

Bewerken: Deparam Voorbeeld toevoegen:

 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }

            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();

            }
        };

Als je gewoon JavaScript wilt gebruiken, kun je...

var getParamValue = (function() {
    var params;
    var resetParams = function() {
            var query = window.location.search;
            var regex = /[?&;](.+?)=([^&;]+)/g;
            var match;

            params = {};

            if (query) {
                while (match = regex.exec(query)) {
                    params[match[1]] = decodeURIComponent(match[2]);
                }
            }    
        };

    window.addEventListener
    && window.addEventListener('popstate', resetParams);

    resetParams();

    return function(param) {
        return params.hasOwnProperty(param) ? params[param] : null;
    }

})();​

Vanwege de nieuwe HTML Geschiedenis API en in het bijzonder history.pushState() en history.replaceState(), kan de URL veranderen waardoor de cache van parameters en hun waarden ongeldig worden.

Deze versie zal de interne cache van parameters updaten elke keer als de geschiedenis verandert.

Ben Call
Bewerkt antwoord 9de3 oktober 2014 в 4:13
Commentaren (0)