一个非常全面的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动态引用CSS文件的2种方法介绍
Jun 06 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
详解JavaScript常量定义
Jan 03 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 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
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
python 自动提交和抓取网页
2009/07/13 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
pytorch实现线性拟合方式
2020/01/15 Python
Python如何生成xml文件
2020/06/04 Python
英国网上电器商店:Electricshop
2020/03/15 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
2014道德模范事迹材料
2014/02/16 职场文书
上课迟到检讨书
2014/02/19 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android