一个非常全面的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 使用 NodeList需要注意的问题
Mar 04 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
python定义具名元组实例操作
2021/02/28 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
婚庆公司的创业计划书
2014/01/22 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
低碳环保倡议书
2014/04/14 职场文书
历史学专业求职信
2014/06/19 职场文书
同学聚会邀请函
2015/01/30 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
蜗居观后感
2015/06/11 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers