如何在 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

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

更新於:2024年11月5日

56 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告