如何在 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));
示例修改
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; }