Comment puis-je analyser une URL dans le nom d'hôte et le chemin dans javascript?

j'aimerais prendre une ficelle

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

et le transformer en un objet tel que

a.hostname == "example.com"

et

a.pathname == "/aa/bb"
249
demandé sur hakre 2009-04-10 06:17:42
la source

20 ответов

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"
313
répondu freddiefujiwara 2012-04-05 22:22:56
la source

trouvés ici: 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"
235
répondu Joseph Oster 2016-04-07 10:22:23
la source

La manière moderne:

new URL("http://example.com/aa/bb/")

renvoie un objet avec les propriétés hostname et pathname , ainsi que quelques autres .

le premier argument est une URL relative ou absolue; s'il est relatif, alors vous devez spécifier le second argument (L'URL de base). Par exemple, pour une URL relative à la page courante:

new URL("/aa/bb/", location)

en plus des navigateurs, cette API est également disponible en noeud.js depuis la v7, par le biais de require('url').URL .

197
répondu rvighne 2017-07-16 20:20:39
la source

Voici une fonction simple utilisant un regexp qui imite le comportement de la balise a .

Pros

  • un comportement prévisible (pas de croix problèmes de navigateur)
  • n'a pas besoin de DOM
  • c'est vraiment court.

Cons

  • La regexp est un peu difficile à lire

-

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"
}
*/

EDIT:

voici une répartition de l'expression régulière

var reURLInformation = new RegExp([
    '^(https?:)//', // protocol
    '(([^:/?#]*)(?::([0-9]+))?)', // host (hostname and port)
    '(/{0,1}[^?#]*)', // pathname
    '(\?[^#]*|)', // search
    '(#.*|)$' // hash
].join(''));
var match = href.match(reURLInformation);
92
répondu Rems 2017-04-11 17:30:39
la source

la réponse de freddiefujiwara est assez bonne, mais j'avais aussi besoin de prendre en charge les URLs relatives dans Internet Explorer. J'ai trouvé la solution suivante:

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

maintenant utilisez - le pour obtenir les propriétés nécessaires:

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

jsfiddle example: http://jsfiddle.net/6AEAB/

59
répondu Claus 2012-11-16 00:48:21
la source
var loc = window.location;  // => "http://example.com:3000/pathname/?search=test#hash"

renvoie le currentUrl.

si vous voulez passer votre propre chaîne comme url ( ne fonctionne pas dans IE11 ):

var loc = new URL("http://example.com:3000/pathname/?search=test#hash")

alors vous pouvez le parser comme:

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"
31
répondu Peter Graham 2018-05-02 19:39:09
la source

js-uri (disponible sur Google Code) prend une URL de chaîne de caractères et résout un objet URI à partir de celui-ci:

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
15
répondu Rex M 2009-04-10 06:21:16
la source

Qu'en est-il de la simple expression régulière?

url = "http://www.example.com/path/to/somwhere";
urlParts = /^(?:\w+\:\/\/)?([^\/]+)(.*)$/.exec(url);
hostname = urlParts[1]; // www.example.com
path = urlParts[2]; // /path/to/somwhere
11
répondu svestka 2015-10-08 17:19:46
la source

Voici une version que j'ai copiée de https://gist.github.com/1847816 , mais réécrit pour qu'il soit plus facile à lire et à déboguer. Le but de la copie des données d'ancrage à une autre variable appelée "résultat" est parce que les données d'ancrage est assez long, et donc la copie d'un nombre limité de valeurs au résultat aidera à simplifier le résultat.

/**
 * See: https://gist.github.com/1847816
 * Parse a URI, returning an object similar to Location
 * Usage: var uri = parseUri("hello?search#hash")
 */
function parseUri(url) {

  var result = {};

  var anchor = document.createElement('a');
  anchor.href = url;

  var keys = 'protocol hostname host pathname port search hash href'.split(' ');
  for (var keyIndex in keys) {
    var currentKey = keys[keyIndex]; 
    result[currentKey] = anchor[currentKey];
  }

  result.toString = function() { return anchor.href; };
  result.requestUri = result.pathname + result.search;  
  return result;

}
7
répondu Biagio Arobba 2015-12-14 10:15:50
la source

pour ceux qui recherchent une solution moderne qui fonctionne en IE, Firefox, et Chrome:

aucune de ces solutions qui utilisent un élément hyperlien ne fonctionnera de la même manière dans chrome. si vous passez une url invalide (ou Vierge) à chrome, il retournera toujours l'hôte d'où le script est appelé. Donc dans IE vous obtiendrez blanc, tandis que dans Chrome vous obtiendrez localhost (ou n'importe quoi).

Si vous essayez regarder le parrain, c'est trompeur. Vous voudrez vous assurer que l'hôte que vous obtenez de retour était dans l'url d'origine pour traiter avec ceci:

    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 : '';
    }
5
répondu KingOfHypocrites 2013-11-06 04:20:46
la source

vous pouvez également utiliser parse_url() fonction de php.projet js .

Code:

parse_url('http://username:[email protected]/path?arg=value#anchor');

résultat:

{
  scheme: 'http',
  host: 'hostname',
  user: 'username',
  pass: 'password',
  path: '/path',
  query: 'arg=value',
  fragment: 'anchor'
}
5
répondu Andrey Rudenko 2015-07-13 12:14:18
la source

Cross-browser pour analyser les URL , des œuvres autour de la chemin d'accès relatif de problème pour IE 6, 7, 8 et 9:

function ParsedUrl(url) {
    var parser = document.createElement("a");
    parser.href = url;

    // IE 8 and 9 dont load the attributes "protocol" and "host" in case the source URL
    // is just a pathname, that is, "/example" and not "http://domain.com/example".
    parser.href = parser.href;

    // IE 7 and 6 wont load "protocol" and "host" even with the above workaround,
    // so we take the protocol/host from window.location and place them manually
    if (parser.host === "") {
        var newProtocolAndHost = window.location.protocol + "//" + window.location.host;
        if (url.charAt(1) === "/") {
            parser.href = newProtocolAndHost + url;
        } else {
            // the regex gets everything up to the last "/"
            // /path/takesEverythingUpToAndIncludingTheLastForwardSlash/thisIsIgnored
            // "/" is inserted before because IE takes it of from pathname
            var currentFolder = ("/"+parser.pathname).match(/.*\//)[0];
            parser.href = newProtocolAndHost + currentFolder + url;
        }
    }

    // copies all the properties to this object
    var properties = ['host', 'hostname', 'hash', 'href', 'port', 'protocol', 'search'];
    for (var i = 0, n = properties.length; i < n; i++) {
      this[properties[i]] = parser[properties[i]];
    }

    // pathname is special because IE takes the "/" of the starting of pathname
    this.pathname = (parser.pathname.charAt(0) !== "/" ? "/" : "") + parser.pathname;
}
"151930920 d'Utilisation" ( démo JSFiddle ici ):

var myUrl = new ParsedUrl("http://www.example.com:8080/path?query=123#fragment");

résultat:

{
    hash: "#fragment"
    host: "www.example.com:8080"
    hostname: "www.example.com"
    href: "http://www.example.com:8080/path?query=123#fragment"
    pathname: "/path"
    port: "8080"
    protocol: "http:"
    search: "?query=123"
}
5
répondu acdcjunior 2016-07-25 01:10:31
la source

La AngularJS façon violon ici: 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>
4
répondu Joseph Oster 2013-04-15 11:21:14
la source

aujourd'hui, je rencontre ce problème et j'ai trouvé: URL - MDN Web APIs

var url = new URL("http://test.example.com/dir/subdir/file.html#hash");

Ce retour:

{ 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: "" }

en espérant que ma première contribution vous aidera !

4
répondu A. Moynet 2016-06-08 17:35:23
la source

solution simple et robuste en utilisant le modèle de module. Cela inclut un correctif pour IE où le pathname n'a pas toujours une barre oblique vers l'avant ( / ).

j'ai créé un Gist avec un JSFiddle qui offre un analyseur plus dynamique. Je vous recommande de vérifier et fournir de la rétroaction.

var URLParser = (function (document) {
    var PROPS = 'protocol hostname host pathname port search hash href'.split(' ');
    var self = function (url) {
        this.aEl = document.createElement('a');
        this.parse(url);
    };
    self.prototype.parse = function (url) {
        this.aEl.href = url;
        if (this.aEl.host == "") {
           this.aEl.href = this.aEl.href;
        }
        PROPS.forEach(function (prop) {
            switch (prop) {
                case 'hash':
                    this[prop] = this.aEl[prop].substr(1);
                    break;
                default:
                    this[prop] = this.aEl[prop];
            }
        }, this);
        if (this.pathname.indexOf('/') !== 0) {
            this.pathname = '/' + this.pathname;
        }
        this.requestUri = this.pathname + this.search;
    };
    self.prototype.toObj = function () {
        var obj = {};
        PROPS.forEach(function (prop) {
            obj[prop] = this[prop];
        }, this);
        obj.requestUri = this.requestUri;
        return obj;
    };
    self.prototype.toString = function () {
        return this.href;
    };
    return self;
})(document);

Démo

var URLParser = (function(document) {
  var PROPS = 'protocol hostname host pathname port search hash href'.split(' ');
  var self = function(url) {
    this.aEl = document.createElement('a');
    this.parse(url);
  };
  self.prototype.parse = function(url) {
    this.aEl.href = url;
    if (this.aEl.host == "") {
      this.aEl.href = this.aEl.href;
    }
    PROPS.forEach(function(prop) {
      switch (prop) {
        case 'hash':
          this[prop] = this.aEl[prop].substr(1);
          break;
        default:
          this[prop] = this.aEl[prop];
      }
    }, this);
    if (this.pathname.indexOf('/') !== 0) {
      this.pathname = '/' + this.pathname;
    }
    this.requestUri = this.pathname + this.search;
  };
  self.prototype.toObj = function() {
    var obj = {};
    PROPS.forEach(function(prop) {
      obj[prop] = this[prop];
    }, this);
    obj.requestUri = this.requestUri;
    return obj;
  };
  self.prototype.toString = function() {
    return this.href;
  };
  return self;
})(document);

/* Main */
var out = document.getElementById('out');
var urls = [
  'https://www.example.org:5887/foo/bar?a=1&b=2#section-1',
  'ftp://www.files.com:22/folder?id=7'
];
var parser = new URLParser();
urls.forEach(function(url) {
  parser.parse(url);
  println(out, JSON.stringify(parser.toObj(), undefined, ' '), 0, '#0000A7');
});

/* Utility functions */
function print(el, text, bgColor, fgColor) {
  var span = document.createElement('span');
  span.innerHTML = text;
  span.style['backgroundColor'] = bgColor || '#FFFFFF';
  span.style['color'] = fgColor || '#000000';
  el.appendChild(span);
}
function println(el, text, bgColor, fgColor) {
  print(el, text, bgColor, fgColor);
  el.appendChild(document.createElement('br'));
}
body {
  background: #444;
}
span {
  background-color: #fff;
  border: thin solid black;
  display: inline-block;
}
#out {
  display: block;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  font-size: 12px;
  white-space: pre;
}
<div id="out"></div>

sortie

{
 "protocol": "https:",
 "hostname": "www.example.org",
 "host": "www.example.org:5887",
 "pathname": "/foo/bar",
 "port": "5887",
 "search": "?a=1&b=2",
 "hash": "section-1",
 "href": "https://www.example.org:5887/foo/bar?a=1&b=2#section-1",
 "requestUri": "/foo/bar?a=1&b=2"
}
{
 "protocol": "ftp:",
 "hostname": "www.files.com",
 "host": "www.files.com:22",
 "pathname": "/folder",
 "port": "22",
 "search": "?id=7",
 "hash": "",
 "href": "ftp://www.files.com:22/folder?id=7",
 "requestUri": "/folder?id=7"
}
3
répondu Mr. Polywhirl 2015-01-16 02:09:57
la source

utiliser https://www.npmjs.com/package/uri-parse-lib pour ce

var t = parserURI("http://user:[email protected]:8080/directory/file.ext?query=1&next=4&sed=5#anchor");
3
répondu Юра Панарин 2016-12-21 20:38:30
la source

arrêtez de réinventer la roue. Use https://github.com/medialize/URI.js /

var uri = new URI("http://example.org:80/foo/hello.html");
// get host
uri.host(); // returns string "example.org:80"
// set host
uri.host("example.org:80");
2
répondu Hugo Sequeira 2015-06-02 17:53:10
la source

il suffit d'utiliser l'url.js library (pour web et node.js).

https://github.com/websanova/js-url

url: http://example.com?param=test#param=again

url('?param'); // test
url('#param'); // again
url('protocol'); // http
url('port'); // 80
url('domain'); // example.com
url('tld'); // com

etc...
1
répondu Rob 2015-09-04 13:31:41
la source
function parseUrl(url) {
    var m = url.match(/^(([^:\/?#]+:)?(?:\/\/(([^\/?#:]*)(?::([^\/?#:]*))?)))?([^?#]*)(\?[^#]*)?(#.*)?$/),
        r = {
            hash: m[8] || "",                    // #asd
            host: m[3] || "",                    // localhost:257
            hostname: m[4] || "",                // localhost
            href: m[0] || "",                    // http://localhost:257/deploy/?asd=asd#asd
            origin: m[1] || "",                  // http://localhost:257
            pathname: m[6] || (m[1] ? "/" : ""), // /deploy/
            port: m[5] || "",                    // 257
            protocol: m[2] || "",                // http:
            search: m[7] || ""                   // ?asd=asd
        };
    if (r.protocol.length == 2) {
        r.protocol = "file:///" + r.protocol.toUpperCase();
        r.origin = r.protocol + "//" + r.host;
    }
    r.href = r.origin + r.pathname + r.search + r.hash;
    return m && r;
};

il fonctionne avec les urls absolues et relatives

1
répondu Nikolay 2016-09-03 17:30:10
la source

Pourquoi ne pas l'utiliser?

        $scope.get_location=function(url_str){
        var parser = document.createElement('a');
        parser.href =url_str;//"http://example.com:3000/pathname/?search=test#hash";
        var info={
            protocol:parser.protocol,   
            hostname:parser.hostname, // => "example.com"
            port:parser.port,     // => "3000"
            pathname:parser.pathname, // => "/pathname/"
            search:parser.search,   // => "?search=test"
            hash:parser.hash,     // => "#hash"
            host:parser.host, // => "example.com:3000"      
        }
        return info;
    }
    alert( JSON.stringify( $scope.get_location("http://localhost:257/index.php/deploy/?asd=asd#asd"),null,4 ) );
1
répondu tanthuc 2017-06-12 09:26:05
la source

Autres questions sur javascript url