浅谈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中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
Javascript Promise用法详解
May 10 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
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
3.从实例开始
2006/10/09 PHP
php escape URL编码
2008/12/10 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
详解python字节码
2018/02/07 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
python 实现A*算法的示例代码
2018/08/13 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
django中瀑布流写法实例代码
2019/10/14 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
考察邀请函范文
2015/01/31 职场文书
努力学习保证书
2015/02/26 职场文书