一个非常全面的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的Tab选项框效果代码(插件)
Mar 01 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
微信小程序 登录的简单实现
Apr 19 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
vuex入门最详细整理
Mar 04 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
用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读取数据库信息的几种方法
2008/05/24 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
JS变量及其作用域
2017/03/29 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python中str.format()详解
2017/03/12 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
聊聊python中的循环遍历
2020/09/07 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
优秀团员事迹材料1000字
2014/08/20 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python