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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
jquery select操作的日期联动实现代码
Dec 06 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
js仿淘宝放大镜效果
Dec 28 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
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
通过javascript把图片转化为字符画
2013/10/24 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
写了个监控nginx进程的Python脚本
2012/05/10 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
成教自我鉴定
2013/10/27 职场文书
演讲稿的写法
2014/05/19 职场文书
项目负责人任命书
2014/06/04 职场文书
关于环保的标语
2014/06/13 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
JavaScript设计模式之原型模式详情
2022/06/21 Javascript