一个非常全面的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 相关文章推荐
为指定元素增加样式的js代码
Dec 09 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
angularjs基础教程
Dec 25 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
解决Vue watch里调用方法的坑
Nov 07 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的引用原因分析
2012/09/06 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
js友好的时间返回函数
2016/08/24 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python中文编码那些事
2014/06/25 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Python笔试面试题小结
2019/09/07 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
化学教学随笔感言
2014/02/19 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
2019年教师入党申请书
2019/06/27 职场文书
一起来学习Python的元组和列表
2022/03/13 Python