如何在 JavaScript 中將 URL 引數轉換為 JSON？

---

在處理 URL 時，您經常會遇到新增額外資訊到基本 URL 的查詢引數，這對於開發人員來說可能很有幫助，特別是當他們需要將這些 URL 引數轉換為 JSON 格式時，尤其是在讀取和轉換資料方面。在這裡，我們將探討在 JavaScript 中將 URL 引數轉換為 JSON 格式的不同方法，包括內建方法和使用分割、歸納、正則表示式的自定義解決方案。

瞭解 URL 引數

URL 引數位於 URL 中的問號 (?) 字元之後，每個鍵值對用 & 分隔，這是一個示例 URL。

https://example.com/page?name=Pankaj&age=20&city=Surat

在這個 URL 中，**name=Pankaj、age=20 和 city=Surat** 是查詢引數。

將 URL 引數轉換為 JSON 的方法

• 使用 URLSearchParams
• 使用 split 和 reduce 方法
• 使用正則表示式

使用 URLSearchParams

URLSearchParams 介面提供用於處理查詢引數的方法，這是一種解析 URL 引數的簡單有效的方法。

語法

const params = new URLSearchParams(url.search);
let jsonObj = {};
params.forEach((value, key) => {
    jsonObj[key] = value;
});

示例

在這個示例中，我們使用 URLSearchParams 從 URL 訪問每個查詢引數，透過使用 .forEach 迴圈遍歷引數，我們用鍵和值填充 jsonObj。

function parseQueryString(url) {
    if (!url) return {};

    const queryString = url.split('?')[1];
    if (!queryString) return {};

    return queryString.split('&')
        .filter(param => param) 
        .reduce((acc, param) => {
    
            const [key, value = ''] = param.split('=');
            try {
                acc[decodeURIComponent(key)] = decodeURIComponent(value);
            } catch (e) {
                console.warn(`Failed to decode query parameter: ${param}`);
            }
            
            return acc;
        }, {});
}
const url = 'https://example.com/page?name=Pankaj&age=20&city=Surat';
console.log(parseQueryString(url));

輸出

{
  "name": "Pankaj",
  "age": "20",
  "city": "Surat"
}

使用 split 和 reduce 方法

為了獲得更多控制，您可以使用 split 方法分割引數並使用 reduce 方法構建 JSON 物件。

語法

const queryString = url.split('?')[1];
const jsonObj = queryString.split('&').reduce((acc, param) => {
    const [key, value] = param.split('=');
    acc[key] = decodeURIComponent(value);
    return acc;
}, {});

示例

在這裡，split 方法將查詢字串從 URL 中分離出來，然後我們用 & 分隔每個鍵值對，並使用 reduce 方法迭代這些對，構造 jsonObj，每個引數用 split('=') 分割成鍵和值，然後賦值給 jsonObj，輸出的 JSON 物件與 URL 中的引數匹配。

function urlParamsToJson(url) {
    const queryString = url.split('?')[1];
    const jsonObj = queryString.split('&').reduce((acc, param) => {
        const [key, value] = param.split('=');
        acc[key] = decodeURIComponent(value);
        return acc;
    }, {});
    return jsonObj;
}
const url = 'https://example.com/page?name=Pankaj&age=20&city=Surat';
console.log(urlParamsToJson(url));

輸出

{
  "name": "Pankaj",
  "age": "20",
  "city": "Surat"
}

使用正則表示式

對於熟悉正則表示式的人來說，這種方法可以透過定位特定模式來幫助解析複雜的 URL 字串。

語法

const regex = /[?&]([^=#]+)=([^&#]*)/g;
let jsonObj = {};
let match;
while ((match = regex.exec(url))) {
    jsonObj[match[1]] = decodeURIComponent(match[2]);
}

示例

在這個示例中，我們使用正則表示式匹配 URL 中的每個搜尋引數，正則表示式獲取以 ? 開頭並以 & 結尾的鍵值對，並將其賦值給 jsonObj，decodeURIComponent 函式可以確保正確解碼編碼的字元，最終的 JSON 物件正確地反映了 URL 引數。

function urlParamsToJson(url) {
    const regex = /[?&]([^=#]+)=([^&#]*)/g;
    let jsonObj = {};
    let match;
    while ((match = regex.exec(url))) {
        jsonObj[match[1]] = decodeURIComponent(match[2]);
    }
    return jsonObj;
}
const url = 'https://example.com/page?name=Pankaj&age=20&city=Surat';
console.log(urlParamsToJson(url));

輸出

{
  "name": "Pankaj",
  "age": "20",
  "city": "Surat"
}

處理極端情況

• **空引數：**如果 URL 沒有引數 (https://example.com/page)，則每種方法都應該理想地返回一個空物件 {}。

const url = 'https://example.com/page';
// Expected output: {}
console.log(urlParamsToJson(url)); 

• **重複鍵：**如果 URL 包含重複鍵（例如 ?name=Pankaj&name=Neeraj），則只保留最後一個鍵值對，要儲存所有值，請考慮將重複項儲存為陣列。

示例修改

function urlParamsToJson(url) {
    const params = new URLSearchParams(url.split('?')[1]);
    let jsonObj = {};
    params.forEach((value, key) => {
        if (jsonObj[key]) {
            jsonObj[key] = [].concat(jsonObj[key], value);
        } else {
            jsonObj[key] = value;
        }
    });
    return jsonObj;
}