我想拿一根绳子
var a = "http://example.com/aa/bb/"
并将其处理成一个对象，使得
a.hostname == "example.com"
和
a.pathname == "/aa/bb"
如何在 javascript 中将 URL 解析为主机名和路径？
IT技术
javascript
url
2021-02-02 05:00:46
6个回答
现代方式：
new URL("http://example.com/aa/bb/")
返回一个具有属性hostnameand的对象pathname，以及其他一些属性。
第一个参数是相对或绝对 URL；如果它是相对的，那么您需要指定第二个参数（基本 URL）。例如，对于相对于当前页面的 URL：
new URL("/aa/bb/", location)
除了浏览器，这个API也可以的Node.js自V7通过require('url').URL。
var getLocation = function(href) {
var l = document.createElement("a");
l.href = href;
return l;
};
var l = getLocation("http://example.com/path");
console.debug(l.hostname)
>> "example.com"
console.debug(l.pathname)
>> "/path"
在这里找到：https : //gist.github.com/jlong/2428561
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";
parser.protocol; // => "http:"
parser.host; // => "example.com:3000"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.hash; // => "#hash"
parser.search; // => "?search=test"
parser.origin; // => "http://example.com:3000"
这是一个使用正则表达式模拟a标签行为的简单函数。
优点
- 可预测的行为（没有跨浏览器问题）
- 不需要 DOM
- 它真的很短。
缺点
- 正则表达式有点难以阅读
——
function getLocation(href) {
var match = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
return match && {
href: href,
protocol: match[1],
host: match[2],
hostname: match[3],
port: match[4],
pathname: match[5],
search: match[6],
hash: match[7]
}
}
——
getLocation("http://example.com/");
/*
{
"protocol": "http:",
"host": "example.com",
"hostname": "example.com",
"port": undefined,
"pathname": "/"
"search": "",
"hash": "",
}
*/
getLocation("http://example.com:3000/pathname/?search=test#hash");
/*
{
"protocol": "http:",
"host": "example.com:3000",
"hostname": "example.com",
"port": "3000",
"pathname": "/pathname/",
"search": "?search=test",
"hash": "#hash"
}
*/
编辑：
这是正则表达式的细分
var reURLInformation = new RegExp([
'^(https?:)//', // protocol
'(([^:/?#]*)(?::([0-9]+))?)', // host (hostname and port)
'(/{0,1}[^?#]*)', // pathname
'(\\?[^#]*|)', // search
'(#.*|)$' // hash
].join(''));
var match = href.match(reURLInformation);
var loc = window.location; // => "http://example.com:3000/pathname/?search=test#hash"
返回当前网址。
如果您想将自己的字符串作为 url 传递（在 IE11 中不起作用）：
var loc = new URL("http://example.com:3000/pathname/?search=test#hash")
然后你可以像这样解析它：
loc.protocol; // => "http:"
loc.host; // => "example.com:3000"
loc.hostname; // => "example.com"
loc.port; // => "3000"
loc.pathname; // => "/pathname/"
loc.hash; // => "#hash"
loc.search; // => "?search=test"