一个非常全面的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 setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
javascript动画算法实例分析
Jul 31 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
java和js实现的洗牌小程序
Sep 30 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.MVC的模板标签系统(五)
2006/09/05 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
监听element-ui table滚动事件的方法
2019/03/26 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python类定义和类继承详解
2015/05/08 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
Django分组聚合查询实例分享
2020/04/29 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
英文自荐信
2013/12/15 职场文书
如何写好自荐信
2014/04/07 职场文书
具结保证书
2015/01/17 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
Vue Element plus使用方法梳理
2022/12/24 Vue.js