利用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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
javascript事件模型介绍
May 31 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 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
介绍几个array库的新函数 php
2006/12/29 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
php中给js数组赋值方法
2014/03/10 Javascript
Three.js快速入门教程
2016/09/09 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python发送伪造的arp请求
2014/01/09 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
详解Python如何生成词云的方法
2018/06/01 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
python和php哪个更适合写爬虫
2020/06/22 Python
python 如何将office文件转换为PDF
2020/09/22 Python
Python截图并保存的具体实例
2021/01/14 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
Python中Qslider控件实操详解
2021/02/20 Python
医院办公室主任职责
2013/12/29 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
建筑管理专业求职信
2014/07/28 职场文书
新党章的学习心得体会
2014/11/07 职场文书
失职检讨书大全
2015/01/26 职场文书
中标通知书范本
2015/04/17 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python