一个非常全面的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 学习 - 提高篇
Feb 02 Javascript
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
JQuery学习总结【二】
Dec 01 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
layui原生表单验证的实例
Sep 09 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 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编程最快明白》第三讲:php数组
2010/11/01 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
php文件操作相关类实例
2015/06/18 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
javascript 打印页面代码
2009/03/24 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
JavaScript手机振动API
2016/06/11 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
angular4笔记系列之内置指令小结
2018/11/09 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python 可爱的大小写
2008/09/06 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
浅谈Python中的bs4基础
2018/10/21 Python
Python实现FTP文件传输的实例
2019/07/07 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
python之随机数函数的实现示例
2020/12/30 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
AOP的定义以及作用
2013/09/08 面试题
大四自我鉴定范文
2013/10/06 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
父亲节活动总结
2015/02/12 职场文书
二胎满月酒致辞
2015/07/29 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
移除Selenium中window.navigator.webdriver值
2022/06/10 Python