在 JavaScript 中解析查詢字串
在本教程中,我們將瞭解如何在 JavaScript 中解析查詢字串,但在深入瞭解之前,讓我們回顧一下歷史,看看為什麼我們首先需要這些查詢字串?
查詢字串
是緊跟在問號 ?
之後的超連結或 URL 的一部分。它將值設定為稱為鍵或引數的變數,有點類似於 python 字典。它將資料從一個網頁傳送到另一個網頁,同時從資料庫或網路伺服器檢索指定的資料。
虛擬超連結
www.mysite.com//default.aspx?username=user+1&units=kgs&units=pounds&permission=false
在上面的超連結中,這部分指的是查詢:
username=user+1&units=kgs&units=pounds&permission=false
順便說一下,解析
意味著挖出某些東西的一部分,這裡我們談論的是查詢字串,這意味著這個過程將獲取我們查詢字串的一部分並使用它。解析後的查詢字串在引用或檢索資料請求中起著重要作用。
解析後的查詢如下所示:
username=user 1
現在讓我們看一個更具體的例子,它展示了 JavaScript 如何通過多個測試用例解析給定超連結的查詢字串;在這個例子中,我們的 parseQuery
函式將超連結作為引數,並以 JavaScript 物件的形式輸出解析後的查詢。
parseQuery
的語法
parseQuery(query)
- 查詢:作為查詢傳遞的特定字串。
function parseQuery(query) {
object = {};
if (query.indexOf('?') != -1){
query = query.split('?');
query = query[1];
}
parseQuery = query.split("&");
for (var i = 0; i < parseQuery.length; i++) {
pair = parseQuery[i].split('=');
key = decodeURIComponent(pair[0]);
if (key.length == 0) continue;
value = decodeURIComponent(pair[1].replace("+"," "));
if (object[key] == undefined) object[key] = value;
else if (object[key] instanceof Array) object[key].push(value);
else object[key] = [object[key],value];
}
return object;
};
讓我們從建立一個空物件開始,然後我們的查詢或超連結從 ?
中斷擺脫多餘的 URL。
完成後,我們將查詢從 &
中分離出來,以獲取所謂的屬性及其值,以列表的形式進行迭代,以分別提取值和屬性。
現在,鍵值對將檢查一些測試用例,最後,從剩餘的值中,我們將任何 +
符號替換為一個空格,從而為我們提供更易讀的值。
讓我們來看看我們的測試用例:
情況 1
parseQuery("username=Eren&units=kgs&permission=true");
在這種情況下,我們傳遞一個查詢而不是 URL username=Eren&units=kgs&permission=true
將會發生的是它將跳過第一個 if 塊,並且由於有多個鍵和值對,因此查詢被拆分,並且這行程式碼被檢查為真,因為我們沒有重複的鍵。
if (object[key] == undefined) object[key] = value;
輸出:
{
username: 'Eren',
units: 'kgs',
permission: 'true'
}
案例 2
parseQuery("http:/www.mysite.com//default.txt?username=David+Rogers&units=kgs&permission=false");
現在我們使用完整的超連結
http:/www.mysite.com//default.txt?username=David+Rogers&units=kgs&permission=false
作為引數,下面給出的 if
條件得到 True
,這個塊將從我們的超連結中提取查詢
if (query.indexOf('?') != -1){
輸出:
{
username: 'David Rogers',
units: 'kgs',
permission: 'false'
}
案例 3
parseQuery("http:/www.mysite.com//default.txt?username=user1&insect=%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B0");
讓我們嘗試提供一個包含編碼訊息的 URL。
http:/www.mysite.com//default.txt?username=user1&insect=%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B0
我們已經使用 decodeURIComponent()
函式來解碼此訊息。
輸出:
{
username: 'user 1',
insect: 'бабочка'
}
案例 4
parseQuery("http:/www.mysite.com//default.txt?username=Eren&units=kgs&permission=false&units=pounds");
最後,我們考慮一個包含重複鍵的超連結
http:/www.mysite.com//default.txt?username=Eren&units=kgs&permission=false&units=pounds
對於程式碼行下方的第一個重複值,將執行並建立一個陣列。
else object[key] = [object[key],value];
之後,每個重複的條目都會被推送到這個陣列中。
else if (object[key] instanceof Array) object[key].push(value);
輸出:
{
username: 'Eren',
units: [ 'kgs', 'pounds'],
permission: 'false'
}