JavaScript中Location.search处理使用方法

JavaScript中Location.search处理使用方法

在JavaScript中，Location对象提供了一些方法来操作URL，其中Location.search属性用于获取或设置URL中问号后面的查询字符串部分。查询字符串可以包含多个参数，每个参数由参数名和参数值组成，以等号连接，不同参数之间以&符号分隔。

获取查询参数

我们可以通过如下方式获取查询参数：

const search = window.location.search;

console.log(search); // 打印URL中的查询字符串

获取后，search变量的值类似于"?name=张三&age=18"，它代表整个查询字符串。

如果需要获取其中某一个参数的值，则可以通过正则表达式或封装好的工具函数进行处理。

首先，我们可以使用正则表达式来获取单个参数的值：

const search = window.location.search;

// 创建一个正则表达式对象，用于匹配参数名为id的参数
const reg = new RegExp('(^|&)id=([^&]*)(&|$)', 'i');
const match = search.match(reg);
const id = match ? decodeURIComponent(match[2]) : null;

console.log(id); // 打印URL中id参数的值

上面的代码中，我们创建了一个正则表达式对象，用于匹配参数名为id的参数。然后，调用match方法将查询字符串与正则表达式进行匹配，如果匹配成功，则返回一个数组，其中第二个元素为id参数的值，否则返回null。由于match方法返回的数组中匹配成功的元素是经过URL编码的，所以我们需要调用decodeURIComponent方法对其进行解码。

除了使用正则表达式，我们还可以使用现成的工具函数来获取查询参数，例如qs库：

import qs from 'qs';

const search = window.location.search;

const obj = qs.parse(search, { ignoreQueryPrefix: true });
const id = obj.id;

console.log(id); // 打印URL中id参数的值

可以看到，使用qs.parse方法可以方便地将查询字符串解析为对象，并从中获取参数的值。

设置查询参数

除了获取查询参数，我们还可以通过如下方式设置查询参数：

const query = {
  name: '张三',
  age: 18,
};

const search = '?' + new URLSearchParams(query);

window.location.search = search;

上面的代码中，我们创建了一个表示查询参数的对象query，它包含两个属性name和age。然后，将这个对象作为参数创建URLSearchParams对象，并将其转换为字符串形式，并在其前面加上问号?，表示这是URL中的查询字符串，最后将结果赋值给window.location.search，即可完成URL的修改。

另一个示例：

const originalUrl = window.location.href;
const originalSearchParams = new URLSearchParams(window.location.search);

// 修改查询参数
originalSearchParams.set('name', '李四');

const newUrl = originalUrl.replace(window.location.search, '?' + originalSearchParams.toString());

// 通过 history 对象重定向到新的 URL
window.history.pushState(null, null, newUrl);

上面的代码中，我们获取了当前页面的原始URL，并从中创建了一个URLSearchParams对象用于操作查询参数。然后，我们通过set方法修改了name参数的值。接着，我们将修改后的查询字符串与原始URL拼接起来，并通过history.pushState方法重定向到新的URL。需要注意的是，由于这种方式修改URL，浏览器并不会发起新的请求，而是在不刷新页面的情况下更新当前页面的URL。