Ekstrak Parameter URL Bersarang dengan Cekap dengan Logik Rekursif dalam JavaScript

Senario

Ekstrak nilai parameter carian sasaran (mis., id) daripada URL bersarang dalam bahagian URL, menggunakan kunci parameter carian yang diberikan (mis., daripada).

Sebagai contoh, untuk URL /main?from=/details?from=/more?id=456, fungsi getNestedSearchParamValue mengekstrak URL bersarang dengan mencari parameter carian daripada.

...

const nestedUrl = new URL(urlPart, dummyUrl);

const nestedUrlPart = nestedUrl.searchParams.get(nestedParamKey) ?? "";

...

Pertama, URL bersarang /details?from=/more?id=456 diekstrak. Memandangkan URL mengandungi parameter lain daripada carian, fungsi getNestedSearchParamValue memanggil dirinya sendiri, menghantar URL yang diekstrak /details?from=/more?id=456 sebagai urlPart, bersama-sama dengan nestedParamKey (dari) dan targetParamKey (id) yang sama.

...

if(nestedUrlPart.includes(nestedParamKey)){
    return getNestedSearchParamValue(nestedUrlPart, nestedParamKey, targetParamKey);
}

...

Dalam panggilan rekursif pertama, nestedUrlPart menjadi /more?id=456. Oleh kerana URL ini tidak mengandungi parameter carian daripada (nestedParamKey), ini menunjukkan bahawa ini ialah URL sasaran untuk mencari parameter id (targetParamKey). Oleh itu, ekstrak nilai id parameter carian daripada bahagian url ini.

...

else {
    const targetUrl = new URL(nestedUrlPart, dummyUrl);
    return targetUrl.searchParams.get(targetParamKey);
}

...

Fungsi

const dummyUrl = "http://localhost";

function getNestedSearchParamValue(urlPart: string, nestedParamKey: string, targetParamKey: string): string | null {
    const nestedUrl = new URL(urlPart, dummyUrl);

    const nestedUrlPart = nestedUrl.searchParams.get(nestedParamKey) ?? "";
    if(!nestedUrlPart){
        return null;
    }
    if(nestedUrlPart.includes(nestedParamKey)){
        return getNestedSearchParamValue(nestedUrlPart, nestedParamKey, targetParamKey);
    }
    else {
        const targetUrl = new URL(nestedUrlPart, dummyUrl);
        return targetUrl.searchParams.get(targetParamKey);
    }
}

Penggunaan

const url = "/main?from=/details?from=/more?id=456";

const value = getNestedSearchParamValue(url, "from", "id");
console.log(value);

Output

[LOG]: "456" 

Alternatif: gunakan URLSearchParams

Dengan fungsi pembantu getUrlPartSearchParams

const queryDelimiter = "?";

function getUrlPartSearchParams(urlPart: string):URLSearchParams | null {
    const [_, ...query] = urlPart.split(queryDelimiter);
    const queryStr = query.join(queryDelimiter);
    return new URLSearchParams(queryStr);
}

Fungsi getNestedSearchParamValue menjadi

function getNestedSearchParamValue(urlPart: string, nestedParamKey: string, targetParamKey: string): string | null {
    let searchParams = getUrlPartSearchParams(urlPart);

    const nestedUrlPart = searchParams?.get(nestedParamKey);
    // console.log(nestedUrlPart)
    if(!nestedUrlPart) {
        return null;
    }
    if (nestedUrlPart.includes(nestedParamKey)) {
        return getNestedSearchParamValue(nestedUrlPart, nestedParamKey, targetParamKey);
    } else {
        searchParams = getUrlPartSearchParams(nestedUrlPart);
        return searchParams?.get(targetParamKey) ?? null;
    }
}

Sumber

• https://developer.mozilla.org/en-US/docs/Web/API/URL

• https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Atas ialah kandungan terperinci Ekstrak Parameter URL Bersarang dengan Cekap dengan Logik Rekursif dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!