logo

3 způsoby, jak analyzovat řetězec dotazu v adrese URL

Nestává se příliš často, aby bylo nutné řetězec dotazu analyzovat pomocí JavaScriptu, ale to rozhodně neznamená, že se to nikdy nestane. Pro ty vzácné případy, kdy potřebujete analyzovat řetězec dotazu na frontendu, existuje mnoho způsobů, jak analyzovat řetězec dotazu do objektu, přičemž každý parametr je vlastností daného objektu. V tomto článku vám ukážu tři z těchto technik a prozradím vám tajemství toho, jak tyto techniky používám ve svých vlastních projektech.

Získání řetězce dotazu

Vím, že úvodní odstavec může být trochu zavádějící, ale tyto 3 techniky ve skutečnosti nejsou způsoby, jak analyzovat samotný řetězec dotazu; jsou způsoby, jak získat řetězec dotazu z adresy URL. V podstatě existuje pouze jedna technika, kterou znám a kterou bych mohl najít, jak převést řetězec dotazu na objekt. Nyní si uveďme tři způsoby, jak získat řetězec dotazu z adresy URL.

1) Použijte substring a indexOf

Pokud máte adresu URL jako řetězec, můžete jednoduše použít kombinaci substring a indexOf k vytažení části řetězce, která obsahuje parametry dotazu:

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

2) Použijte location vlastnosti

Pokud je adresa URL, kterou potřebujete analyzovat, adresa URL stránky, na které se právě nacházíte, pak je adresa URL uložena přímo v window.location . Ještě lépe location má vlastnost nazvanou search , který vám poskytne pouze řetězec dotazu.

1
 
var queryString = window.location.search;

Všimněte si však, že zde vrácený řetězec dotazu má před sebou úvodní otazník, takže k jeho odstranění budete chtít použít následující kód:

1
 
queryString = queryString.substring(1);

3) Použití prvku kotvy

V nedávném článku nazvaném „Lazy Man's URL Parsing in JavaScript“ jsem diskutoval o metodě, kdy jste vytvořili prvek kotvy, který za vás analyzoval adresy URL. Jako location , můžete načíst řetězec dotazu pomocí search vlastnictví. A také jako location , budete muset odstranit úvodní otazník. Doporučuji vám přečíst si výše uvedený článek, kde se dozvíte, jak to udělat.

Analýza řetězce dotazu pomocí JavaScriptu

Nyní vás ve skutečnosti naučím, jak analyzovat řetězec dotazu. Pojďme vytvořit funkci, kde odešlete řetězec dotazu jako parametr a vrátí se objekt dotazu.

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

Je to opravdu docela jednoduché. Nejprve stačí split řetězec na části oddělené ampersandem. Nyní máme pole řetězců, z nichž každý je ve formátu „klíč=hodnota“. Nyní tedy musíme oddělit každý z těchto párů klíč–hodnota. Procházíme polem řetězců, které máme, a split oni také. Poté použijeme první prvek v tomto poli jako klíč vlastnosti, druhý prvek v poli jako hodnotu tohoto klíče a přidáme je jako vlastnost do našeho queryObj .

Použití tohoto v mých projektech

V současné době vytvářím projekt založený na technice diskutované v příspěvku, který jsem zmínil výše. Je to plugin/samostatná knihovna jQuery, která využívá tuto techniku ​​k analýze adres URL za vás. V rámci tohoto pluginu/knihovny jsem se rozhodl přidat do analyzátoru několik vlastností, včetně vlastnosti, která obsahuje analyzovaný řetězec dotazu, takže jej nemusíte analyzovat sami. Kromě toho tento plugin opraví 2 chyby aplikace Internet Explorer související s touto technikou a poskytne vám několik dalších malých funkcí.

Dokončuje se

Tím končí dnešní příspěvek. Očekávejte, že plugin, který jsem zmínil, bude uvolněn v pondělí. V té době by také měly tyto stránky vypadat trochu jinak. Nové téma by mělo být do té doby připraveno a živě použito na tomto webu. Doufám, že se vám bude líbit. Děkuji za přečtení; nezapomeňte sdílet. A jako vždy:Veselé kódování!

Reklama:

Přistupujte k aplikacím Windows odkudkoli na hostovaném cloudovém desktopu prostřednictvím počítačů PC nebo Mac nebo zařízení iOS/Android. Chcete-li spolupracovat se svými spoluhráči, vyzkoušejte bezplatný hosting SharePoint Foundation.