在JavaScript中解析URL
目录
本文介绍两种通过 JS 实现 URL 解析,分别是:通过创建链接标签实现 URL 解析 和 通过正则表达式来处理 URL
通过创建链接标签实现 url 解析
function parseUrl(url) {
var anchor = document.createElement("a");
anchor.href = url;
var path = anchor.pathname,
search = anchor.search,
query = null;
if (search) {
var keyValue = search.replace(/^\?/, "").split("&"),
tempValue;
query = {};
for (var i = 0, j = keyValue.length; i < j; i++) {
tempValue = keyValue[i].split("=");
query[tempValue[0]] = tempValue[1];
}
}
var defaultPort = {
"http:": 80,
"https:": 443,
"ftp:": 21,
"gopher:": 70,
"ws:": 80,
wws: 443,
};
return {
href: anchor.href, //full url
protocol: anchor.protocol, //protocol, eg: http:, https:, ftp:
host: anchor.host, //host, eg: www.lyblog.net:8087
hostname: anchor.hostname, //hostname, eg: www.lyblog.net
path: path + search, //path and search, eg: www.lyblog.net/archive/2015/566.html?debug=1
port: anchor.port || defaultPort[anchor.protocol] || "", //port, eg: 8087
pathname: path, //path, eg: /archive/2015/566.html
hash: anchor.hash, //hash, eg: #respond
search: search, //search, eg: ?search=1&debug=2
query: query, //query eg: JSON
};
}
通过正则表达式来处理 URL
function parseUrl(href) {
var match = href.match(
/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)(\/[^?#]*)(\?[^#]*|)(#.*|)$/
),
query = null,
keyValue,
tplValue,
defaultPort = {
"http:": 80,
"https:": 443,
"ftp:": 21,
"gopher:": 70,
"ws:": 80,
wws: 443,
};
if (match[6]) {
keyValue = match[6].replace(/^\?/, "").split("&");
query = {};
for (var i = 0, j = keyValue.length; i < j; i++) {
tplValue = keyValue[i].split("=");
query[tplValue[0]] = tplValue[1];
}
}
return (
match && {
href: href,
protocol: match[1],
host: match[2],
hostname: match[3],
port: match[4] || defaultPort[match[1]] || "",
path: match[5] + match[6],
pathname: match[5],
search: match[6],
hash: match[7],
query: query,
}
);
}