如何將URL解析爲javascript中的主機名和路徑？

時間 2020-03-07

標籤如何 url 解析 javascript 主機名路徑欄目 HTTP/TCP 简体版

原文原文鏈接

我想帶一個弦 php

var a = "http://example.com/aa/bb/"

並將其處理爲一個對象 html

a.hostname == "example.com"

和 git

a.pathname == "/aa/bb"

#1樓

freddiefujiwara的答案很好，但我還須要在Internet Explorer中支持相對URL。我想出瞭如下解決方案： angularjs

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;
};

如今使用它來獲取所需的屬性： github

var a = getLocation('http://example.com/aa/bb/');
document.write(a.hostname);
document.write(a.pathname);

JSFiddle示例： http : //jsfiddle.net/6AEAB/ ajax

#2樓

您還能夠使用Locutus項目（之前爲php.js）中的parse_url()函數。 chrome

碼： api

parse_url('http://username:password@hostname/path?arg=value#anchor');

結果： app

{
  scheme: 'http',
  host: 'hostname',
  user: 'username',
  pass: 'password',
  path: '/path',
  query: 'arg=value',
  fragment: 'anchor'
}

#3樓

在這裏找到： https : //gist.github.com/jlong/2428561 dom

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"

#4樓

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>

#5樓

對於那些正在尋找可在IE，Firefox和Chrome中運行的現代解決方案的人：

這些使用超連接元素的解決方案在chrome中都沒法正常工做。 若是您將無效（或空白）的URL傳遞給chrome，它將始終返回從中調用腳本的主機。所以，在IE中您將得到空白，而在Chrome中您將得到本地主機（或其餘名稱）。

若是您嘗試查看引薦來源網址，這是騙人的。您將要確保返回的主機位於原始URL中以處理此問題：

function getHostNameFromUrl(url) {
        // <summary>Parses the domain/host from a given url.</summary>
        var a = document.createElement("a");
        a.href = url;

        // Handle chrome which will default to domain where script is called from if invalid
        return url.indexOf(a.hostname) != -1 ? a.hostname : '';
    }