一个非常全面的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 Select标记中options操作方法集合
Oct 22 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
jquery 插件开发备注
Aug 27 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
js计算精度问题小结
Apr 22 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
微信小程序工具函数封装
Oct 28 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
mysql 字段类型说明
2007/04/27 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Python列表list数组array用法实例解析
2014/10/28 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Python实现最常见加密方式详解
2019/07/13 Python
python 默认参数相关知识详解
2019/09/18 Python
np.dot()函数的用法详解
2020/01/17 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
最受欢迎的自我评价
2013/12/22 职场文书
环保倡议书500字
2014/05/15 职场文书
邀请函模板
2015/02/02 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
Java中的随机数Random
2022/03/17 Java/Android