一个非常全面的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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
js实现简单的轮播图效果
Dec 13 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实现贪吃蛇小游戏
2016/07/26 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
详解Python自建logging模块
2018/01/29 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
动物学专业毕业生求职信
2013/10/11 职场文书
经典的班主任推荐信
2013/10/28 职场文书
实习自我鉴定
2013/12/15 职场文书
副总经理岗位职责
2014/03/16 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
千手观音观后感
2015/06/03 职场文书
KTV员工管理制度
2015/08/06 职场文书
一行Python命令实现批量加水印
2022/04/07 Python
MySQL创建管理RANGE分区
2022/04/13 MySQL
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript
python读取mat文件生成h5文件的实现
2022/07/15 Python