一个非常全面的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 继承实现例子
Aug 12 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
Javascript实现鼠标移入方向感知
Jun 24 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
SONY SRF-M100的电路分析
2021/03/02 无线电
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
PHP实现文件上传与下载
2020/08/28 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
python中while循环语句用法简单实例
2015/05/07 Python
Python中datetime模块参考手册
2017/01/13 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技