首页 > web前端 > js教程 > 正文

获取JavaScript中的查询字符串的方法

WBOY
发布: 2023-08-26 17:13:12
原创
1246 人浏览过

获取JavaScript中的查询字符串的方法

在这篇简短的文章中,我们将讨论在 JavaScript 中获取查询字符串的几种不同方法。

当您使用 JavaScript 时,有时您需要访问脚本中的查询字符串参数。没有直接的方法可以实现这一点,因为没有内置的 JavaScript 函数或方法可以让您实现它。当然,您可以找到很多满足您要求的第三方实用程序脚本,但最好可以使用普通 JavaScript 来实现它。

在这篇文章中,我们将讨论如何构建自定义函数以在普通 JavaScript 中获取查询字符串参数。稍后,我们还将探索 URLSearchParams 接口,以了解它的工作原理以及它如何帮助处理查询字符串参数。

如何在 Vanilla JavaScript 中获取查询字符串

在本节中,我们将了解如何使用普通 JavaScript 获取查询字符串值。

让我们看一下下面的 JavaScript 示例。

function getQueryStringValues(key) {
    var arrParamValues = [];
    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for (var i = 0; i < url.length; i++) {
        var arrParamInfo = url[i].split('=');

        if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
            arrParamValues.push(decodeURIComponent(urlparam[1]));
        }
    }

    return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);
}

// index.php?keyword=FooBar&hobbies[]=sports&hobbies[]=Reading
console.log(getQueryStringValues('keyword')); // "FooBar"
console.log(getQueryStringValues('hobbies')); // Array [ "sports", "Reading" ]
console.log(getQueryStringValues('keyNotExits')); // null
登录后复制

我们创建了 getQueryStringValues 函数,您可以使用该函数获取 URL 中可用的查询字符串参数的值。

让我们浏览一下该函数,看看它是如何工作的。

以下代码片段是该函数中最重要的代码片段之一。

var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
登录后复制

首先,我们使用 indexOf 方法来查找 ? 字符在 URL 中的位置。接下来,我们使用 slice 方法提取 URL 中的查询字符串部分。最后,我们使用 split 方法通过 & 字符分割查询字符串。因此,url 变量是使用查询字符串参数数组进行初始化的。

接下来,我们循环遍历 url 数组的所有元素。在循环中,我们使用 split 方法通过 = 字符来分割数组值。这样, arrParamInfo 变量就用一个数组进行初始化,其中数组键是参数名称,数组值是参数值。您可以在下面的代码片段中看到这一点。

var arrParamInfo = url[i].split('=');
登录后复制

接下来,我们将它与函数中传递的参数进行比较。如果它与传入的参数匹配,我们会将参数值推送到 arrParamValues 数组中。正如您所看到的,我们还介绍了单个参数和数组参数。

if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
    arrParamValues.push(decodeURIComponent(urlparam[1]));
}
登录后复制

最后,如果 arrParamValues 变量包含值,我们将返回它,否则返回 null 变量包含值,我们将返回它,否则返回 null

return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);
登录后复制

您可以继续使用不同的值测试 getQueryStringValues 函数。

如上面的示例所示,我们使用不同的值调用它,并使用 console.log 函数记录输出。需要注意的是,如果您在 console.log 函数记录输出。需要注意的是,如果您在 getQueryStringValues 函数中传递的参数作为数组存在于查询字符串中,您将得到一个数组作为响应,并且它将返回该参数的所有值。

URLSearchParams 方式

这是在 JavaScript 中获取查询字符串值的最简单方法之一。 URLSearchParams 接口提供实用方法来处理 URL 的查询字符串。您可以通过“我可以使用吗”来检查浏览器支持情况。

让我们快速看看它是如何工作的。

// index.php?keyword=Search Text&click=Submit
var urlParams = new URLSearchParams(window.location.search);
登录后复制

使用查询字符串初始化 URLSearchParams 对象后,您就可以使用 URLSearchParams 对象后,您就可以使用

对象提供的实用方法了。

让我们在本文中介绍一些有用的方法。

get

方法

get顾名思义,

方法用于获取查询字符串参数的值。

让我们尝试通过以下示例来理解它。

// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.get('keyword')); // “Search Text”
登录后复制
keyword在上面的示例中,我们获取了 查询字符串参数的值,它将输出搜索文本

get这样就可以使用

方法获取任意查询字符串参数的值。

has

方法

has

方法用于检查查询字符串中是否存在参数。

// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.has('order')); // “false”
console.log(objUrlParams.has('click')); // “true”
登录后复制
has在上面的示例中,我们使用了

方法来检查不同参数是否存在。

getAll

方法

getAll

方法用于获取某个参数多次存在时的所有值。

让我们通过以下示例来检查一下。

// index.php?keyword=Search Text&click=Submit&filter=value1&filter=value2
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.getAll('filter')); // [“value1”,”valu2”]
登录后复制
getAll如您所见,当我们使用 方法时,它返回与该参数关联的所有值。

结论

今天,我们讨论了可用于在 JavaScript 中获取查询字符串的不同方法。除了普通 JavaScript 之外,我们还讨论了如何使用 URLSearchParams

接口获取查询字符串变量。🎜

以上是获取JavaScript中的查询字符串的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!