一个非常全面的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 判断指定字符串是否为有效数字
May 11 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
JavaScript手风琴页面制作
May 17 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
js实现烟花特效
Mar 02 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
自己动手开发jQuery插件教程
2011/08/25 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
如何写出高性能的JSP和Servlet
2013/01/22 面试题
求职推荐信
2013/10/28 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
质检部经理岗位职责
2014/02/19 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
大学毕业感言200字
2014/03/09 职场文书
保证书格式
2015/01/16 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js