一个非常全面的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 相关文章推荐
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jQuery中:submit选择器用法实例
Jan 03 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
vue component组件使用方法详解
Jul 14 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
详解vue+css3做交互特效的方法
Nov 20 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 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
实用函数4
2007/11/08 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python科学画图代码分享
2017/11/29 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python实现ftp文件传输功能
2020/03/20 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
python在地图上画比例的实例详解
2020/11/13 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
2014年幼儿园元旦活动方案
2014/02/13 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
同学聚会开幕词
2019/04/02 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
redis实现共同好友的思路详解
2021/05/26 Redis