javascript 解析url的search方法

本篇攻略将介绍 JavaScript 中解析 URL 的 search 方法的完整过程，包括解析过程和两条示例说明。

本篇攻略将介绍 JavaScript 中解析 URL 的 search 方法的完整过程，包括解析过程和两条示例说明。

解析过程

1. 获取 URL

首先，我们需要从浏览器中获取 URL。可以通过浏览器提供的 window.location 对象来获取。

const url = window.location.href;

window.location.href 将返回当前文档的完整 URL，包括协议（http 或 https）、域名、端口、路径和查询字符串等信息。

2. 解析查询字符串

接下来，我们需要将 URL 的查询字符串部分解析出来。查询字符串是指 URL 中 ? 之后的部分，它由一个或多个键值对组成，每个键值对之间用 & 分隔。

可以使用 URLSearchParams API 来解析查询字符串。

const searchParams = new URLSearchParams(url.search);

解析出的 searchParams 对象提供了一系列方法来操作键值对，比如 get、has、set、delete、toString 等。

3. 获取和操作键值对

现在我们已经拥有了一个解析出查询字符串的对象，可以使用 get 方法来获取某个键对应的值。

const value = searchParams.get('key');

我们也可以使用 set 方法来更新或添加一个键值对。

searchParams.set('key', 'value');

删除一个键值对可以使用 delete 方法。

searchParams.delete('key');

示例说明

示例1:

// URL: https://www.example.com/?name=John&age=30

const searchParams = new URLSearchParams(window.location.search);

console.log(searchParams.get('name')); // "John"
console.log(searchParams.get('age')); // "30"

以上代码解析出了 URL 中的查询字符串，并使用 get 方法来获取键 name 和 age 对应的值。

示例2:

// URL: https://www.example.com/

const searchParams = new URLSearchParams();
searchParams.set('name', 'John');
searchParams.set('age', '30');

console.log(searchParams.toString()); // "name=John&age=30"

以上代码新建了一个空的查询字符串对象，并使用 set 方法来添加键值对，最后使用 toString 方法将对象转化为字符串。

综上所述，以上是 JavaScript 中解析 URL 的 search 方法的完整攻略。