在 JavaScript 中解析查询字符串

Tahseen Tauseef 2023年1月30日 2022年5月10日
  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'
}