使用 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 不包含搜索参数 `from`（`nestedParamKey`），所以表示这是要搜索 `id` 参数的目标 URL（`targetParamKey`），因此从这个 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;
    }
}

资源