网站建设之使用JavaScript获取URL参数

URL参数(也称为查询字符串参数或URL变量)用于通过URL从页面到页面或从客户端到服务器发送少量数据。它们可以包含各种有用的信息,例如搜索查询,链接引荐,产品信息,用户首选项等。

在本文中,我们将向您展示如何使用JavaScript解析和操作URL参数。

本文针对相关性和准确性在2020年进行了更新。

获取URL参数

在现代浏览器中,这要归功于URLSearchParams接口,这变得容易得多。这定义了许多实用程序方法来使用URL的查询字符串。

假设我们的URL是https://example.com/?product=shirt&color=blue&newuser&size=m,我们可以使用window.location.search以下命令获取查询字符串:

const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m

然后,我们可以使用解析查询字符串的参数URLSearchParams

const urlParams = new URLSearchParams(queryString);

然后,我们对结果调用其任何方法。

例如,URLSearchParams.get()将返回与给定搜索参数关联的第一个值:

const product = urlParams.get('product')
console.log(product);
// shirt

const color = urlParams.get('color')
console.log(color);
// blue

const newUser = urlParams.get('newuser')
console.log(newUser);
// empty string

其他有用的方法

检查参数是否存在

您可以URLSearchParams.has()用来检查某个参数是否存在:

console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false

获取所有参数值

您可以URLSearchParams.getAll()用来返回与特定参数关联的所有值:

console.log(urlParams.getAll('size'));
// [ 'm' ]

//Programmatically add a second size parameter.
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// [ 'm', 'xl' ]

遍历参数

URLSearchParams还提供了一些熟悉的Object迭代器方法,使您可以迭代其键,值和条目:

const
  keys = urlParams.keys(),
  values = urlParams.values(),
  entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for(const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m

浏览器支持

浏览器对的支持URLSearchParams很好。在撰写本文时,所有主流浏览器均支持该功能。

如果您必须支持Internet Explorer等旧版浏览器,则可以使用polyfill。或者,您可以继续阅读本教程的其余部分,并学习如何进行自己的学习。

滚动您自己的查询字符串解析功能

让我们继续使用上一节中使用的URL:

http://example.com/?product=shirt&color=blue&newuser&size=m

这是一个为所有URL参数提供一个整洁对象的函数:

function getAllUrlParams(url) {
// get query string from url (optional) or window
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
// we'll store the parameters here
var obj = {};
// if query string exists
if (queryString) {
// stuff after # is not part of query string, so get rid of it
queryString = queryString.split('#')[0];
// split our query string into its component parts
var arr = queryString.split('&');
for (var i = 0; i < arr.length; i++) {
// separate the keys and the values
var a = arr[i].split('=');
// set parameter name and value (use 'true' if empty)
var paramName = a[0];
var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
// (optional) keep case consistent
paramName = paramName.toLowerCase();
if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
// if the paramName ends with square brackets, e.g. colors[] or colors[2]
if (paramName.match(//[(/d+)?/]$/)) {
// create key if it doesn't exist
var key = paramName.replace(//[(/d+)?/]/, '');
if (!obj[key]) obj[key] = [];
// if it's an indexed array e.g. colors[2]
if (paramName.match(//[/d+/]$/)) {
// get the index value and add the entry at the appropriate position
var index = //[(/d+)/]/.exec(paramName)[1];
obj[key][index] = paramValue;
} else {
// otherwise add the value to the end of the array
obj[key].push(paramValue);
}
} else {
// we're dealing with a string
if (!obj[paramName]) {
// if it doesn't exist, create property
obj[paramName] = paramValue;
} else if (obj[paramName] && typeof obj[paramName] === 'string'){
// if property does exist and it's a string, convert it to an array
obj[paramName] = [obj[paramName]];
obj[paramName].push(paramValue);
} else {
// otherwise add the property
obj[paramName].push(paramValue);
}
}
}
}
return obj;
}

您将很快看到它的工作原理,但是首先,这里是一些用法示例:

getAllUrlParams().product; // 'shirt'
getAllUrlParams().color; // 'blue'
getAllUrlParams().newuser; // true
getAllUrlParams().nonexistent; // undefined
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'

这是一个演示供您试用。

使用此功能之前要了解的事项

  • 我们的函数假定参数由&字符分隔,如W3C规范中所示。但是,通常没有明确定义 URL参数格式,因此您有时可能会看到;或将其&amp;作为分隔符
  • 如果参数没有等号或参数没有值,则我们的函数仍然有效。
  • 重复参数的值放入数组中。

如果您只想要一个函数,可以将其放入代码中,那么现在就完成了。如果您想了解该功能的工作原理,请继续阅读。

以下部分假定您了解一些JavaScript,包括函数,对象和数组。如果您需要复习,请查看MDN JavaScript参考

功能如何运作

总体而言,该功能需要一个URL的查询字符串(后部分?和前#)和吐出来的是数据在一个整洁的对象。

首先,这一行说,如果我们指定了URL,则在问号后得到所有内容,否则,只需使用窗口的URL:

var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

接下来,我们将创建一个对象来存储我们的参数:

var obj = {};

如果查询字符串存在,我们将开始对其进行解析。首先,我们必须确保从处开始删除该部分#,因为它不是查询字符串的一部分:

queryString = queryString.split('#')[0];

现在,我们可以将查询字符串分成其组成部分:

var arr = queryString.split('&');

这将为我们提供一个看起来像这样的数组:

['product=shirt', 'color=blue', 'newuser', 'size=m']

接下来,我们将遍历此数组,并将每个项目分为一个键和一个值,我们将很快将它们放入对象中:

var a = arr[i].split('=');

让我们为各个变量分配键和值。如果没有参数值,我们将其设置true为表示参数名称存在。可以根据您的用例随意更改:

var paramName = a[0];
var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

(可选)您可以将所有参数名称和值设置为小写。这样,您可以避免有人使用example=TRUE而不是将流量发送到URL example=true且脚本中断的情况。(我已经看到这种情况的发生。)但是,如果您的查询字符串需要区分大小写,请随时忽略此部分:

paramName = paramName.toLowerCase();
if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

接下来,我们需要处理可以在中接收的各种类型的输入paramName。这可以是索引数组,非索引数组或常规字符串。

如果它是一个索引数组,我们希望对应paramValue的数组为一个数组,其值插入正确的位置。如果它是一个非索引数组,我们希望对应paramValue的数组是一个将元素推到上面的数组。如果它是字符串,那么我们想在该对象上创建一个常规属性,并将其分配paramValue给它,除非该属性已经存在,在这种情况下,我们希望将现有属性转换为paramValue数组,然后将传入的paramValue内容推入该数组。

为了说明这一点,这是一些示例输入,以及我们期望的输出:

getAllUrlParams('http://example.com/?colors[0]=red&colors[2]=green&colors[6]=blue');
// { "colors": [ "red", null, "green", null, null, null, "blue" ] }
getAllUrlParams('http://example.com/?colors[]=red&colors[]=green&colors[]=blue');
// { "colors": [ "red", "green", "blue" ] }
getAllUrlParams('http://example.com/?colors=red&colors=green&colors=blue');
// { "colors": [ "red", "green", "blue" ] }
getAllUrlParams('http://example.com/?product=shirt&color=blue&newuser&size=m');
// { "product": "shirt", "color": "blue", "newuser": true, "size": "m" }

这是实现功能的代码:

if (paramName.match(//[(/d+)?/]$/)) {
var key = paramName.replace(//[(/d+)?/]/, '');
if (!obj[key]) obj[key] = [];
if (paramName.match(//[/d+/]$/)) {
var index = //[(/d+)/]/.exec(paramName)[1];
obj[key][index] = paramValue;
} else {
obj[key].push(paramValue);
}
} else {
if (!obj[paramName]) {
obj[paramName] = paramValue;
} else if (obj[paramName] && typeof obj[paramName] === 'string'){
obj[paramName] = [obj[paramName]];
obj[paramName].push(paramValue);
} else {
obj[paramName].push(paramValue);
}
}

最后,我们返回带有参数和值的对象。

如果您的网址包含任何编码的特殊字符,例如空格(编码为%20),则您也可以对其进行解码以获取原始值,如下所示:

// assume a url parameter of test=a%20space
var original = getAllUrlParams().test; // 'a%20space'
var decoded = decodeURIComponent(original); // 'a space'

请注意不要解码已经解码的内容,否则脚本将出错,尤其是涉及百分比时。

无论如何,恭喜!现在您知道了如何获取URL参数,并希望在此过程中学到了其他技巧。

结论

本文中的代码适用于最常见的用例,在这些用例中您将获得URL查询参数。如果您要处理任何边缘情况,例如不常见的分隔符或特殊格式,请确保进行相应的测试和调整。

如果你想要做更多的网址,还有诸如提供特定的库,查询字符串Medialize URI.js。但是,由于它基本上是字符串操作,因此仅使用纯JavaScript通常很有意义。无论您使用自己的代码还是使用库,请确保检查所有内容并确保其适用于您的用例。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/259414.html

(0)
上一篇 2022年5月21日
下一篇 2022年5月21日

相关推荐

发表回复

登录后才能评论