在 JavaScript 中使用遞歸邏輯高效提取嵌套 URL 參數

設想

使用給定的搜尋參數鍵（例如 from）從 URL 部分內的巢狀 URL 中提取目標搜尋參數的值（例如 id）。

例如，對於 URL /main?from=/details?from=/more?id=456，函數 getNestedSearchParamValue 透過尋找搜尋參數來提取巢狀 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中文網其他相關文章！