JS操作浏览器的参数方法
在前端开发中，我们经常需要通过 JavaScript 操作浏览器 URL 参数来实现一些功能，例如获取当前页面的参数、动态修改 URL 参数等。在本文中，我们将介绍几种常用的 JavaScript 方法来操作浏览器 URL 参数，并提供示例代码进行演示。
获取URL参数
我们可以使用 window.location.search 来获取当前页面 URL 中的查询参数部分，该部分以问号 ? 开头，并且键值对之间用 & 连接。
下面是一个例子，假设我们的网址是 https://example.com/?id=123&type=article：
----- ------------ - --- ---------------------------------------- ------------------------------------ -- ------ -------------------------------------- -- ----------
另外，如果我们想要获取 URL 中的 hash 值，可以使用 window.location.hash 方法。
---------------------------------- -- -------
修改URL参数
使用 URLSearchParams API
我们可以使用 URLSearchParams 对象来操作 URL 中的查询参数。这个 API 可以让我们方便地添加、删除、修改 URL 参数。
下面是一个例子，假设我们需要将当前页面的 id 参数值修改为 456：
----- ------------ - --- ---------------------------------------- ---------------------- ------- --------------------------------- --- ------------------------------------------------------
在上面的代码中，我们首先创建了一个新的 URLSearchParams 对象，并调用 set 方法来修改参数值。然后，我们使用 history.replaceState 来更新 URL，这样就可以保持浏览器历史记录不变，同时改变 URL 参数。
使用正则表达式
如果我们只需要修改某个参数值，也可以直接使用正则表达式来进行替换。下面是一个例子：
----- ----- - ------ ----- ------ - --------------------- ----- ------ - ------------------------- --------------- -------------------- - -------
在上面的代码中，我们首先获取当前页面的 URL，并使用正则表达式 /\?id=\d+/g 匹配到 ?id= 后面跟着数字的字符串，然后将其替换为新的参数值。
添加URL参数
如果我们想要添加一个新的查询参数到 URL 中，可以使用 URLSearchParams API 或者手动拼接字符串。
使用 URLSearchParams API
下面是一个例子，在当前页面 URL 的末尾添加一个名为 category 值为 javascript 的查询参数：
----- ------------ - --- ---------------------------------------- ------------------------------- -------------- --------------------------------- --- ------------------------------------------------------
在上面的代码中，我们调用 append 方法来添加一个新的查询参数。然后，使用 history.replaceState 来更新 URL。
手动拼接字符串
如果你不想使用 URLSearchParams API，也可以手动拼接字符串。下面是一个例子：
----- ------ - ---------------------------------------------------------------------------------------------------------------------------- --------------------------------- --- --------
在上面的代码中，我们使用模板字符串来拼接 URL，并将新的 URL 传递给 history.replaceState 来更新 URL。
删除URL参数
我们可以使用 URLSearchParams API 或者正则表达式来删除 URL 中的查询参数。
使用 URLSearchParams API
下面是一个例子，删除当前页面中的 type 参数：
----- ------------ - --- ---------------------------------------- ---------------------------- --------------------------------- --- ------------------------------------------------------
在上面的代码中，我们调用 delete 方法来删除指定的查询参数，并使用 history.replaceState 来更新 URL。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/921