利用a标签自动解析URL分析网址实例


Posted in Javascript onOctober 20, 2014

对于window.location,我们比较熟悉,它有protocol,hostname,host,port,search,hash,href,pathname等属性,a标签也和window.location一样,也有这样属性,这样可以方便我们分析网址,闲话少说,上代码。

function parseURL(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':',''),
host: a.hostname,
port: a.port||'80',
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('/')
};
}

测试地址

console.log(parseURL("http://www.w3school.com.cn/jsref/dom_obj_anchor.asp?type=2#id2"));

结果如下

{

file: "dom_obj_anchor.asp",

hash: "id2",

host: "www.w3school.com.cn",

params: {type: "2"},

path: "/jsref/dom_obj_anchor.asp",

port: "80",

protocol: "http",

query: "?type=2",

relative: "/jsref/dom_obj_anchor.asp?type=2#id2",

segments: [0: "jsref",1: "dom_obj_anchor.asp"],

source: http://www.w3school.com.cn/jsref/dom_obj_anchor.asp?type=2#id2

}
Javascript 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
vue-cli3跨域配置的简单方法
Sep 06 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 #Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 #Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 #Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 #Javascript
js添加select下默认的option的value和text的方法
Oct 19 #Javascript
使用变量动态设置js的属性名
Oct 19 #Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 #Javascript
You might like
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
实例解析php的数据类型
2018/10/24 PHP
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
详细分析vue表单数据的绑定
2020/07/20 Javascript
Python中用max()方法求最大值的介绍
2015/05/15 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
财务出纳岗位职责
2014/02/03 职场文书
集体婚礼策划方案
2014/02/22 职场文书
阳光体育活动总结
2014/04/30 职场文书
免职通知
2015/04/23 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
运动会闭幕式致辞
2015/07/29 职场文书