浅谈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 JSON操作入门实例
Apr 16 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
JS实现碰撞检测效果
Mar 12 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP答题类应用接口实例
2015/02/09 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
农村婚礼证婚词
2014/01/10 职场文书
九年级语文教学反思
2014/02/04 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
天河观后感
2015/06/11 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
Java 异步任务计算FutureTask
2022/04/28 Java/Android