浅谈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 异步方法队列链实现代码分析
Jun 05 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
详解vue表单——小白速看
Apr 08 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 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
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
php上传文件常见问题总结
2015/02/03 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
php批量修改表结构实例
2017/05/24 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python决策树分类算法学习
2017/12/22 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python实现按长宽比缩放图片
2018/06/07 Python
python制作图片缩略图
2019/04/30 Python
简单了解django缓存方式及配置
2019/07/19 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
JDK安装目录下有哪些内容
2014/08/25 面试题
某公司的.net工程师面试题笔试题
2013/11/22 面试题
百度软件工程师职位
2013/02/14 面试题
党员培训思想汇报
2014/01/07 职场文书
2014年质量工作总结
2014/11/22 职场文书
幼师辞职信范文
2015/02/27 职场文书