一个非常全面的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 相关文章推荐
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
js 操作符实例代码
2009/10/24 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
javascript中this关键字详解
2016/12/12 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python 进程的几种创建方式详解
2019/08/29 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
元旦晚会邀请函
2014/02/01 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
团干部培训方案
2014/06/03 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
服务行业标语口号
2015/12/26 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL