JS简易获取、修改URL参数（借助URLSearchParams）¶

要用JavaScript来获取修改URL参数，最原始的做法就是直接做字符串处理，但是会比较麻烦。本文引入URLSearchParams来简化这个过程。

获取指定的URL参数¶

假设当前的网址是https://www.kyleblog.cn/?page=15&size=10，我们想获得page参数，示例代码如下：

var params = new URLSearchParams(location.search);
var page = params.get('page');
console.log(page);

知识点：

• location.search返回的是参数部分?page=2&size=10
• new URLSearchParams(location.search) 创建一个URLSearchParams对象，它专门处理URL参数。
• params.get('page')，使用URLSearchParams对象的get方法来获取指定的参数值。
• 因为URL里的page=15，console.log(page) 会输出15。

修改指定的URL参数¶

修改URL里的page参数，示例代码如下：

var params = new URLSearchParams(location.search);
params.set('page', 20);
location.search = params.toString();

知识点：

• params.set('page', 20)，使用URLSearchParams对象的set方法来修改指定的参数值。
• location.search = params.toString()，将修改后的URL参数应用到浏览器，页面会发生跳转。

查询+修改指定的URL参数¶

结合上述两个例子，获取page参数后加1：

var params = new URLSearchParams(location.search);
var page = params.get('page');
params.set('page', Number(page) + 1);
location.search = params.toString();

本文为kyleblog.cn原创，转载请注明出处：https://www.kyleblog.cn/posts/js_url_param