JavaScript操作 url 中 search 部分方法函数


Posted in Javascript onJune 15, 2016

前言

首先,我们需要知道什么是 search , search 是 window.location 的一个属性.举个例子:

首先,我们这里有一个 url,是 http://www.a.com/list/2.html?page=2&color=4&size=3#pic.

我们访问访问这个地址,打开控制台,输入window.location,会得到如下图的结果

JavaScript操作 url 中 search 部分方法函数

如上,我们要操作的就是上图中方框框出来的这个部分.

为什么要操作这个?

例如,我在第二页,需要跳转到第三页,就需要把上面的 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 部分方法函数的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery datepicker 使用方法
May 20 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 #Javascript
JS封装的自动创建表格的实现代码
Jun 15 #Javascript
基于JavaScript代码实现自动生成表格
Jun 15 #Javascript
JavaScript生成带有缩进的表格代码
Jun 15 #Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 #Javascript
JavaScript仿flash遮罩动画效果
Jun 15 #Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 #Javascript
You might like
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP实现倒计时功能
2020/11/16 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Tesserocr库的正确安装方式
2018/10/19 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python的debug实用工具 pdb详解
2019/07/12 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
python实现粒子群算法
2020/10/15 Python
pandas针对excel处理的实现
2021/01/15 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
私有程序集与共享程序集有什么区别
2013/04/05 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
网络编辑职责
2014/03/01 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
观看建国大业观后感
2015/06/01 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
使用 JavaScript 制作页面效果
2021/04/21 Javascript
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
MySQL自定义函数及触发器
2022/08/05 MySQL