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

更新时间：2014年10月20日 16:03:04 投稿：whsnow

a标签也和window.location一样，也有这样属性，因此可以利用它来分析网址，下面的实例代码，大家可以看看

对于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

}

解析
URL

全面解析Bootstrap排版使用方法（文字样式）
这篇文章全面解析了Bootstrap排版使用方法，本文重点介绍Bootstrap排版中的文字样式设置，感兴趣的小伙伴们可以参考一下
2015-11-11
javascript Table 中2个列（TD）的交换实现代码
非常不错的用js控制talbe中td的位置的实现代码。
2009-02-02
ES6 Promise对象概念及用法实例详解
这篇文章主要介绍了ES6 Promise对象概念及用法,结合实例形式详细分析了ES6中Promise对象的概念、原理、创建、使用方法及相关操作注意事项,需要的朋友可以参考下
2019-10-10
原生js模拟淘宝购物车项目实战
这篇文章主要向大家推荐了一个原生js模拟淘宝购物车项目实战，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现，感兴趣的小伙伴们可以参考一下
2015-11-11
JavaScript模块化开发流程分步讲解
这篇文章主要介绍了JavaScript模块化开发流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-01-01
微信小程序实现登录页面
这篇文章主要为大家详细介绍了微信小程序实现登录页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
JS设置随机出现2个数字的实例代码
这篇文章给大家分享基于js设置随机出现2个数字的实例代码，在文章下面给分享js产生随机数的几个用法介绍，感兴趣的朋友一起看看吧
2017-07-07
javascript 支持页码格式的分页类
前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然后在载入的时候进行分页，网上很多jquery,property等都实现了
2009-12-12
深入浅出ES6之let和const命令
这篇文章主要介绍了ES6中let和const命令的相关资料，非常不错，具有参考借鉴价值，对es6 let const相关知识感兴趣的朋友一起看下吧
2016-08-08
js实现日历的简单算法
这篇文章主要为大家详细介绍了js实现日历的简单算法，用js写了一套日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01