JavaScript 操作 URL Search 参数的完整方法

前言

前言

首先，我们需要明确 search 的定义，它是 window.location 对象的一个属性。以下是一个具体示例：

假设我们有一个 URL：http://www.a.com/list/2.html?page=2&color=4&size=3#pic。

访问该地址并打开浏览器控制台，输入 window.location 后，可以看到如下输出结果：

如上图所示，我们需要操作的部分即为方框标注的区域。

为什么要对这部分进行操作？

例如，当前处于第二页，需要跳转到第三页，此时需将 page=2 更新为 page=3，同时保留其他参数不变。

或者，原本没有 search 部分（如列表第一页通常无参数），现在需要添加 page=2。

此外，有时我们需要知道当前所在的页码，即获取 page 的值。

这些场景都涉及对 search 的操作。在前后端分离的开发模式中，search 是重要的参数配置方式。

构建方法

构建方法

获取 search 中指定的某个参数值

通过搜索，可以找到如下方法：

function GetQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}

方法来源：用JS获取地址栏参数的方法

全功能方法

原本计划编写实现思路，但一时未能回忆完整逻辑，直接提供最终方法：

function funcUrl(name,value,type){
var loca = window.location;
var baseUrl = type==undefined ? loca.origin + loca.pathname + "?" : "";
var query = loca.search.substr(1);
// 如果没有传参,就返回 search 值 不包含问号
if (name==undefined) { return query }
// 如果没有传值,就返回要查询的参数的值
if (value==undefined){
var val = query.match(new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"));
return val!=null ? unescape(val[2]) : null;
};
var url;
if (query=="") {
// 如果没有 search 值,则返回追加了参数的 url
url = baseUrl + name + "=" + value;
}else{
// 如果没有 search 值,则在其中修改对应的值,并且去重,最后返回 url
var obj = {};
var arr = query.split("&");
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].split("=");
obj[arr[i][0]] = arr[i][1];
};
obj[name] = value;
url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");
};
return url;
}

使用方法

使用方法

funcUrl()：获取完整的 search 值（不包含问号）。

funcUrl(name)：返回 URL 中 name 对应的值（整合了上述他人的方法）。

funcUrl(name, value)：将 search 中 name 的值设置为 value，并返回完整的 URL。

返回内容示例：http://www.a.com/list/2.html?page=2&color=4&size=3#pic

funcUrl(name, value, type)：作用与第三条相同，但仅返回更新后的 search 字符串。

这里的 type 可以是任意字符，例如 1。

返回内容示例：page=2&color=4&size=3;

通常用于从 URL 获取参数，再对接到接口上。

小结

小结

原本想寻找现成的插件，但发现要么体积过大难以理解，要么功能不佳。当然，这主要也是由于自身水平有限所致。

因此决定自行编写一个工具函数，虽然代码不够优雅，但满足了实际需求。如果有更好的建议，欢迎留言。

该函数主要配合 Vue 使用，但本文未涉及 Vue 相关内容，因此不属于 Vue 系列教程。

以上所述是小编给大家介绍的 JavaScript 操作 url 中 search 部分方法函数的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！