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

前端技术 2023/09/05 JavaScript

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

本文地址：https://www.stayed.cn/item/13950

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案