在 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'
}