一个非常全面的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 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
PHP学习记录之数组函数
2018/06/01 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
jQuery列表检索功能实现代码
2017/07/17 jQuery
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python实现二分查找算法实例
2015/05/26 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
如何利用python读取micaps文件详解
2020/10/18 Python
美国购车网站:TrueCar
2016/10/19 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物