浅谈js的url解析函数封装


Posted in Javascript onJune 28, 2016

在实际开发中,有些通过get方式与后台交换数据的时候,需要用到的数据在url中,因此就需要我们来获取到url中有用的信息,下面封装的函数已经可以将url解析的很彻底了,可以拿来直接用的:

function parseURL(url) {
   var a = document.createElement('a');
    a.href = url;
    return {
      source: url,
      protocol: a.protocol.replace(':',''),
      host: a.hostname,
      port: a.port,
      query: a.search,
      params: (function(){
        var ret = {},
          seg = a.search.replace(/^\?/,'').split('&'),
          len = seg.length, i = 0, s; //len = 2
          alert(a.search)
        for (;i<len;i++) {
          if (!seg[i]) { continue; }
          s = seg[i].split('=');
          ret[s[0]] = s[1];
        }
        return ret;
      })(),
      file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
      hash: a.hash.replace('#',''),
      path: a.pathname.replace(/^([^\/])/,'/$1'),
      relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
      segments: a.pathname.replace(/^\//,'').split('/')
    };
  }

该函数的用法如下:

var myURL = parseURL(window.location.href); //通过parseURL函数来解析当前页面的url;window.location.href可替换成任意要解析的url,如果直接写其他的url,格式应该字符串;
var search_obj = myURL.params;//该解析方式是将search的内容解析为对象,方便进行数据的调用;其他方法可以自行尝试;
var url_post = myURL.post;
//当前页面的端口号;

以上就是小编为大家带来的浅谈js的url解析函数封装全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript执行效率与性能提升方案
Dec 21 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
JavaScript中点击事件的写法
Jun 28 #Javascript
js改变style样式和css样式的简单实例
Jun 28 #Javascript
js改变css样式的三种方法推荐
Jun 28 #Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 #Javascript
获取input标签的所有属性的方法
Jun 28 #Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 #Javascript
javascript 常用验证函数总结
Jun 28 #Javascript
You might like
一个简单的js树形菜单
2011/12/09 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
python url 参数修改方法
2018/12/26 Python
python简单贪吃蛇开发
2019/01/28 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
聊聊python中的异常嵌套
2020/09/01 Python
python os.listdir()乱码解决方案
2021/01/31 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
学校门卫岗位职责
2014/03/16 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
2015新学期家长寄语
2015/02/26 职场文书
消夏晚会主持词
2015/06/30 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
element多个表单校验的实现
2021/05/27 Javascript