JavaScript の再帰ロジックを使用してネストされた URL パラメータを効率的に抽出する

シナリオ

指定された検索パラメータ キー (from など) を使用して、URL 部分内のネストされた URL からターゲットの検索パラメータ (id など) の値を抽出します。

たとえば、URL /main?from=/details?from=/more?id=456 の場合、関数 getNestedSearchParamValue は検索パラメータ from を検索してネストされた URL を抽出します。

...

const nestedUrl = new URL(urlPart, dummyUrl);

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

...

まず、ネストされた URL /details?from=/more?id=456 が抽出されます。 URL には別の from 検索パラメーターが含まれているため、getNestedSearchParamValue 関数はそれ自体を呼び出し、抽出された URL /details?from=/more?id=456 を urlPart として渡し、さらに同じnestedParamKey (from) と targetParamKey (id) を渡します。

...

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

...

最初の再帰呼び出しでは、nestedUrlPart は /more?id=456 になります。この URL には検索パラメーター (nestedParamKey) が含まれていないため、これが id パラメーター (targetParamKey) を検索するターゲット URL であることを示します。したがって、この URL 部分から検索パラメータ ID の値を抽出します。

...

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

...

機能

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

使用法

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

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

出力

[LOG]: "456" 

代替案: URLSearchParams を使用する

ヘルパー関数 getUrlPartSearchParams を使用する

const queryDelimiter = "?";

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

関数 getNestedSearchParamValue は
になります

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

リソース

• 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

以上がJavaScript の再帰ロジックを使用してネストされた URL パラメータを効率的に抽出するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。