Hvordan kan jeg få værdier for forespørgselsstrenge i JavaScript?

Er der en plugin-fri måde at hente query string værdier via jQuery (eller uden)?

Hvis ja, hvordan? Hvis ikke, er der så et plugin, der kan gøre det?

Brad Larson
Redigeret spørgsmål 2015ør april 2015 в 12:55
Programmering
plugins query-string javascript url
2009ør maj 2009 в 8:10
17 visninger
Løsning

opdatering: september 2018

Du kan bruge URLSearchParams, som er enkel og har rimelig (men ikke fuldstændig) browserunderstøttelse.

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

Original

Du behøver ikke jQuery til det formål. Du kan bare bruge noget rent JavaScript:

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, ' '));
}

Brug:

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


Bemærk: Hvis en parameter er til stede flere gange (?foo=lorem&foo=ipsum), vil du få den første værdi (lorem). Der findes ingen standard for dette, og brugen varierer, se f.eks. dette spørgsmål: (https://stackoverflow.com/questions/1746507/authoritative-position-of-duplicate-http-get-query-keys).
BEMÆRK: Funktionen er stregfølsom over for store og små bogstaver. Hvis du foretrækker et parameternavn, der ikke tager hensyn til store og små bogstaver, skal du tilføje 'i' modifikator til RegExp

Dette er en opdatering baseret på de nye URLSearchParams-specifikationer for at opnå det samme resultat på en mere kortfattet måde. Se svaret med titlen "URLSearchParams" nedenfor.

Martin Tournoij
Redigeret svar 2019ør august 2019 в 7:12
Kommentarer (52)

Roshambo på snipplr.com har et simpelt script til at opnå dette beskrevet i Get URL Parameters with jQuery | Improved. Med hans script får du også nemt mulighed for at trække netop de parametre ud, du ønsker.

Her'er essensen:

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

Derefter skal du bare hente dine parametre fra forespørgselsstrengen.

Så hvis URL/forespørgselsstrengen var xyz.com/index.html?lang=de.

Så skal du bare kalde var langval = $.urlParam('lang');, og så har du det.

UZBEKJON har også et godt blogindlæg om dette, Get URL parameters & values with jQuery.

Yahel
Redigeret svar 2016ør februar 2016 в 6:51
Kommentarer (3)

Hvis du bruger jQuery, kan du bruge et bibliotek som f.eks. jQuery BBQ: Back Button & Query Library.

...jQuery BBQ indeholder en fuld .deparam()-metode sammen med både hash-stathåndtering og fragment-/forespørgselsstrengsparse- og fletteværktøjsmetoder.

Edit: Tilføjelse af Deparam eksempel:

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

            }
        };

Hvis du bare vil bruge almindeligt JavaScript, kan du bruge...

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

})();​

På grund af den nye HTML History API og specielt history.pushState() og history.replaceState(), kan URL'en ændres, hvilket vil ugyldiggøre cachen af parametre og deres værdier.

Denne version vil opdatere sin interne cache af parametre, hver gang historikken ændres.

Ben Call
Redigeret svar 2014ør oktober 2014 в 4:13
Kommentarer (0)