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 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
基于javascript编写简单日历
May 02 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
Javascript动画效果(3)
Oct 11 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
JS+CSS实现过渡特效
Jan 02 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开发中AJAX技术的简单应用
2015/12/11 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
JavaScript基本对象
2007/01/11 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
Python如何为图片添加水印
2016/11/25 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
django自定义模板标签过程解析
2019/12/14 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
护士的岗位职责
2013/12/04 职场文书
高三政治教学反思
2014/02/06 职场文书
好人好事事迹材料
2014/02/12 职场文书
学期评语大全
2014/04/30 职场文书
教师个人教学反思
2016/02/23 职场文书