我想拿一根绳子
var a = "http://example.com/aa/bb/"
然后把它加工成一个物体
a.hostname == "example.com"
and
a.pathname == "/aa/bb"
当前回答
js-uri(在谷歌Code上可用)接受字符串URL并从中解析URI对象:
var some_uri = new URI("http://www.example.com/foo/bar");
alert(some_uri.authority); // www.example.com
alert(some_uri); // http://www.example.com/foo/bar
var blah = new URI("blah");
var blah_full = blah.resolve(some_uri);
alert(blah_full); // http://www.example.com/foo/blah
其他回答
AngularJS的方法在这里:http://jsfiddle.net/PT5BG/4/
<!DOCTYPE html>
<html>
<head>
<title>Parse URL using AngularJS</title>
</head>
<body ng-app ng-controller="AppCtrl" ng-init="init()">
<h3>Parse URL using AngularJS</h3>
url: <input type="text" ng-model="url" value="" style="width:780px;">
<ul>
<li>href = {{parser.href}}</li>
<li>protocol = {{parser.protocol}}</li>
<li>host = {{parser.host}}</li>
<li>hostname = {{parser.hostname}}</li>
<li>port = {{parser.port}}</li>
<li>pathname = {{parser.pathname}}</li>
<li>hash = {{parser.hash}}</li>
<li>search = {{parser.search}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
function AppCtrl($scope) {
$scope.$watch('url', function() {
$scope.parser.href = $scope.url;
});
$scope.init = function() {
$scope.parser = document.createElement('a');
$scope.url = window.location;
}
}
</script>
</body>
</html>
试试这个:
函数getUrlPath (str) { //fakepath当url没有路径 var fakepath = "/FakPath"; Var url = str+fakepath; Var reg = /.+?\:\/\/.+?(\/.+?)(?:#|\?|$)/; Var output = reg.exec(url); //检查"output" != null 返回(输出)?输出[1].replace(fakepath，""): fakepath; ｝ Var myurl = "https://stackoverflow.com/questions/736513/"; const path = getUrlPath(myurl); Console.log (path); //output: /questions/736513/
怎么样?
'https://stackoverflow.com/questions/736513/how-do-i-parse-a-url-into-hostname-and-path-in-javascript'.split('//').pop() .split('/')[0]
结果:
“stackoverflow.com”
freddiefujiwara的答案很好，但我也需要在ie中支持相对url。我想出了以下解决方案:
function getLocation(href) {
var location = document.createElement("a");
location.href = href;
// IE doesn't populate all link properties when setting .href with a relative URL,
// however .href will return an absolute URL which then can be used on itself
// to populate these additional fields.
if (location.host == "") {
location.href = location.href;
}
return location;
};
现在使用它来获得所需的属性:
var a = getLocation('http://example.com/aa/bb/');
document.write(a.hostname);
document.write(a.pathname);
例子:
function getLocation(href) { var location = document.createElement("a"); location.href = href; // IE doesn't populate all link properties when setting .href with a relative URL, // however .href will return an absolute URL which then can be used on itself // to populate these additional fields. if (location.host == "") { location.href = location.href; } return location; }; var urlToParse = 'http://example.com/aa/bb/', a = getLocation(urlToParse); document.write('Absolute URL: ' + urlToParse); document.write('<br />'); document.write('Hostname: ' + a.hostname); document.write('<br />'); document.write('Pathname: ' + a.pathname);
今天我遇到了这个问题，我发现:URL - MDN Web api
var url = new URL("http://test.example.com/dir/subdir/file.html#hash");
这返回:
{ hash:"#hash", host:"test.example.com", hostname:"test.example.com", href:"http://test.example.com/dir/subdir/file.html#hash", origin:"http://test.example.com", password:"", pathname:"/dir/subdir/file.html", port:"", protocol:"http:", search: "", username: "" }
希望我的第一篇文章能帮助到你!
