Extrayez efficacement les paramètres d'URL imbriqués avec une logique récursive en JavaScript

Scénario

Extraire la valeur d'un paramètre de recherche cible (par exemple, id) d'une URL imbriquée dans une partie d'URL, à l'aide d'une clé de paramètre de recherche donnée (par exemple, from).

Par exemple, pour l'URL /main?from=/details?from=/more?id=456, la fonction getNestedSearchParamValue extrait l'URL imbriquée en recherchant le paramètre de recherche de.

...

const nestedUrl = new URL(urlPart, dummyUrl);

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

...

Tout d’abord, l’URL imbriquée /details?from=/more?id=456 est extraite. Étant donné que l'URL contient un autre paramètre de recherche, la fonction getNestedSearchParamValue s'appelle elle-même, en transmettant l'URL extraite /details?from=/more?id=456 comme urlPart, ainsi que les mêmes nestedParamKey (from) et targetParamKey (id).

...

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

...

Dans le premier appel récursif, le nestedUrlPart devient /more?id=456. Étant donné que cette URL ne contient pas le paramètre de recherche (le nestedParamKey), elle indique qu'il s'agit de l'URL cible dans laquelle rechercher le paramètre id (le targetParamKey). Par conséquent, extrayez la valeur de l’identifiant du paramètre de recherche de cette partie URL.

...

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

...

Fonction

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

Utilisation

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

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

Sortie

[LOG]: "456" 

Alternative : utilisez URLSearchParams

Avec une fonction d'assistance getUrlPartSearchParams

const queryDelimiter = "?";

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

La fonction getNestedSearchParamValue devient

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

Ressources

• 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!