3 måder at parse en forespørgselsstreng i en URL

Det er ikke for ofte, at en forespørgselsstreng skal parses med JavaScript, men det er bestemt ikke til at sige, at det aldrig sker. For de sjældne tilfælde, hvor du har brug for at parse forespørgselsstrengen på frontenden, er der adskillige måder at parse en forespørgselsstreng til et objekt, hvor hver parameter er en egenskab for det pågældende objekt. I denne artikel vil jeg vise dig tre af disse teknikker og fortælle dig en hemmelighed om, hvordan jeg bruger disse teknikker i mine egne projekter.

Hent forespørgselsstrengen

Jeg ved godt, at det indledende afsnit kan være lidt misvisende, men de 3 teknikker er faktisk ikke måder at parse selve forespørgselsstrengen på; de er måder at hente forespørgselsstrengen fra URL'en. Der er stort set kun én teknik, som jeg kender til og kunne finde til at konvertere en forespørgselsstreng til et objekt. Lad os lige nu liste de tre måder at trække forespørgselsstrengen fra en URL.

1) Brug substring og indexOf

Hvis du har en URL som en streng, kan du blot bruge en kombination af substring og indexOf for at trække den del af strengen ud, der indeholder forespørgselsparametrene:

1

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

2) Brug location 's egenskaber

Hvis URL'en, du skal parse, er URL'en på den side, du i øjeblikket er på, gemmes URL'en lige inden for window.location . Endnu bedre, location har en egenskab kaldet search , som blot vil give dig forespørgselsstrengen.

1

var queryString = window.location.search;

Bemærk dog, at forespørgselsstrengen, der returneres her, har det indledende spørgsmålstegnet foran sig, så du vil bruge følgende kode for at slippe af med den:

1

queryString = queryString.substring(1);

3) Brug et ankerelement

I en nylig artikel med titlen "The Lazy Man's URL Parsing in JavaScript," diskuterede jeg en metode, hvor du oprettede et ankerelement, der analyserede URL'er for dig. Ligesom location , kan du hente forespørgselsstrengen ved hjælp af search ejendom. Og kan også lide location , skal du fjerne det indledende spørgsmålstegn. Jeg foreslår, at du læser ovenstående artikel for at lære, hvordan du gør dette.

Parsing af forespørgselsstrengen med JavaScript

Det er nu, jeg faktisk lærer dig, hvordan du analyserer forespørgselsstrengen. Lad os oprette en funktion, hvor du sender forespørgselsstrengen som en parameter, og forespørgselsobjektet returneres.

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

Det er virkelig ret simpelt. Først split strengen i dele adskilt af et og-tegn. Nu har vi en række strenge, som hver er i formatet "nøgle=værdi". Så nu mangler vi bare at adskille hvert af disse nøgleværdi-par. Vi går gennem rækken af ​​strenge, som vi har, og split dem også. Vi bruger derefter det første element i det array som egenskabsnøglen, det andet element i arrayet som værdien for den nøgle, og tilføjer dem som en egenskab til vores queryObj .

Brug af dette i mine projekter

Jeg er i øjeblikket ved at skabe et projekt baseret på teknikken diskuteret i indlægget, som jeg nævnte ovenfor. Det er et jQuery-plugin/standalone-bibliotek, der bruger denne teknik til at parse URL'er for dig. Inden for dette plugin/bibliotek har jeg besluttet at tilføje et par egenskaber til parseren, inklusive en egenskab, der indeholder den parsede forespørgselsstreng, så du ikke behøver at parse den selv. Bortset fra det vil dette plugin rette 2 Internet Explorer-fejl relateret til teknikken sammen med at give dig et par ekstra små funktioner.

Afslutter

Det afslutter dagens indlæg. Glæd dig til at se det plugin, jeg nævnte, blive frigivet på mandag. Til den tid burde denne side også se lidt anderledes ud. Det nye tema burde være klar til da og ansat live på denne side. Jeg håber at du nyder det. Tak fordi du læste med; glem ikke at dele. Og som altid:Glad kodning!

Få adgang til dine Windows-applikationer fra hvor som helst på et hostet Cloud-skrivebord via pc'er eller Mac'er eller iOS/Android-enheder. For at samarbejde med dine holdkammerater, prøv SharePoint Foundation-hosting gratis.