3 manieren om een ​​queryreeks in een URL te ontleden

Het komt niet zo vaak voor dat een queryreeks moet worden geparseerd met JavaScript, maar dat wil zeker niet zeggen dat het nooit gebeurt. Voor de zeldzame gevallen waarin u de querystring aan de front-end moet ontleden, zijn er talloze manieren om een ​​querystring in een object te parseren, waarbij elke parameter een eigenschap van dat object is. In dit artikel laat ik je drie van die technieken zien en vertel ik je een geheim over hoe ik deze technieken in mijn eigen projecten gebruik.

De queryreeks ophalen

Ik weet dat de inleidende paragraaf een beetje misleidend kan zijn, maar de 3 technieken zijn eigenlijk geen manieren om de queryreeks zelf te ontleden; het zijn manieren om de queryreeks uit de URL op te halen. Er is in wezen maar één techniek die ik ken en kon vinden om een ​​querystring in een object om te zetten. Laten we nu de drie manieren opsommen om de queryreeks uit een URL te halen.

1) Gebruik substring en indexOf

Als je een URL als string hebt, kun je gewoon een combinatie van substring . gebruiken en indexOf om het deel van de string dat de queryparameters bevat eruit te halen:

1

var queryString = url.substring( url.indexOf('?') + 1 );

2) Gebruik location 's eigenschappen

Als de URL die u moet ontleden de URL is van de pagina waarop u zich momenteel bevindt, dan wordt de URL direct in window.location opgeslagen . Beter nog, location heeft een eigenschap genaamd search , die u alleen de queryreeks geeft.

1

var queryString = window.location.search;

Houd er echter rekening mee dat de vraagtekenreeks die hier wordt geretourneerd het openingsvraagteken ervoor heeft, dus u wilt de volgende code gebruiken om er vanaf te komen:

1

queryString = queryString.substring(1);

3) Gebruik een Anchor Element

In een recent artikel getiteld "The Lazy Man's URL Parsing in JavaScript", besprak ik een methode waarbij u een ankerelement maakte dat URL's voor u ontleedde. Zoals location , kunt u de queryreeks ophalen met de search eigendom. En vind ook location leuk , moet u het eerste vraagteken verwijderen. Ik raad je aan het bovenstaande artikel te lezen om te leren hoe je dit kunt doen.

De querystring ontleden met JavaScript

Dit is het moment waarop ik je echt leer hoe je de queryreeks kunt ontleden. Laten we een functie maken waarin u de queryreeks als parameter verzendt en het queryobject wordt geretourneerd.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var parseQueryString = function( queryString ) {
    var params = {}, queries, temp, i, l;

    // Split into key/value pairs
    queries = queryString.split("&");

    // Convert the array of strings into an object
    for ( i = 0, l = queries.length; i < l; i++ ) {
        temp = queries[i].split('=');
        params[temp[0]] = temp[1];
    }

    return params;
};

Het is echt heel simpel. Eerst hebben we gewoon split de string in delen gescheiden door een ampersand. Nu hebben we een array van strings, die elk de notatie "key=value" hebben. Dus nu hoeven we alleen maar elk van die sleutel-waardeparen te scheiden. We lopen door de reeks strings die we hebben en split zij ook. We gebruiken dan het eerste element in die array als de eigenschapssleutel, het tweede element in de array als de waarde voor die sleutel, en voegen ze als een eigenschap toe aan onze queryObj .

Dit gebruiken in Mijn projecten

Ik ben momenteel bezig met het maken van een project op basis van de techniek die is besproken in de post die ik hierboven heb genoemd. Het is een jQuery-plug-in / zelfstandige bibliotheek die die techniek gebruikt om URL's voor u te ontleden. Binnen deze plug-in/bibliotheek heb ik besloten om een ​​paar eigenschappen aan de parser toe te voegen, waaronder een eigenschap die de geparseerde queryreeks bevat, zodat je deze niet zelf hoeft te ontleden. Afgezien daarvan zal deze plug-in 2 Internet Explorer-bugs oplossen die verband houden met de techniek en je een paar extra kleine functies geven.

Finishing Up

Dat sluit de post van vandaag af. Ik kijk ernaar uit om de plug-in die ik noemde maandag te zien verschijnen. Tegen die tijd zou deze site er ook een beetje anders uit moeten zien. Het nieuwe thema zou tegen die tijd klaar moeten zijn en live op deze site worden gebruikt. Ik hoop dat je ervan geniet. Bedankt voor het lezen; vergeet niet te delen. En zoals altijd:Happy Coding!

Toegang tot uw Windows-applicaties vanaf elke locatie op een gehoste clouddesktop via pc's of Macs of iOS-/Android-apparaten. Probeer gratis SharePoint Foundation-hosting om samen te werken met uw teamgenoten.