在 JavaScript 中解析查詢字串

Tahseen Tauseef 2023年10月12日
  1. 虛擬超連結
  2. parseQuery 的語法
在 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'
}