一个非常全面的javascript URL解析函数和分段URL解析方法


Posted in Javascript onApril 12, 2014

一、URL解析函数

<script>  
/** 
*@param {string} url 完整的URL地址 
*@returns {object} 自定义的对象 
*@description 用法示例:var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top'); 
myURL.file='index.html' 
myURL.hash= 'top' 
myURL.host= 'abc.com' 
myURL.query= '?id=255&m=hello' 
myURL.params= Object = { id: 255, m: hello } 
myURL.path= '/dir/index.html' 
myURL.segments= Array = ['dir', 'index.html'] 
myURL.port= '8080' 
myURL.protocol= 'http' 
myURL.source= 'http://abc.com:8080/dir/index.html?id=255&m=hello#top' 
*/  
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;  
     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('http://abc.com:8080/dir/index.html?id=255&m=hello#top');  
var myURL = parseURL('http://localhost:8080/test/mytest/toLogina.ction?m=123&pid=abc');  
alert(myURL.path);  
alert(myURL.params.m);  
alert(myURL.params.pid);  
</script>

二、JS分段URL解析

URL : 统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成:scheme://host:port/path?query#fragment

scheme  = 通信协议 (常用的http,ftp,maito等)
host = 主机 (域名或IP)
port = 端口号
path = 路径
query = 查询(可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数,用”&”符号隔开,每个参数的名和值用”=”符号隔开。)
fragment = 信息片断(字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。(也称为锚点.))

对于这样一个URL
https://3water.com:80/seo/?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)

2,window.location.protocol
URL 的协议部分
本例返回值:http:

3,window.location.host
URL 的主机部分
本例返回值:3water.com

4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符
本例返回值:”"

5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/seo/

6,window.location.search
查询(参数)部分
除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6

7,window.location.hash
锚点
本例返回值:#imhere

Javascript 相关文章推荐
javascript RadioButtonList获取选中值
Apr 09 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 #Javascript
瀑布流布局代码一例
Apr 11 #Javascript
javascript读写json示例
Apr 11 #Javascript
javascript如何判断输入的url是否正确
Apr 11 #Javascript
javascript判断office版本示例
Apr 11 #Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 #Javascript
jquery解析xml字符串简单示例
Apr 11 #Javascript
You might like
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
python 图片验证码代码分享
2012/07/04 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Python通过字典映射函数实现switch
2020/11/06 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
优秀小学生家长评语
2014/01/30 职场文书
初三学习计划书范文
2014/04/30 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
用Python实现Newton插值法
2021/04/17 Python