Comment analyser une URL en nom d'hôte et en chemin d'accès en javascript ?

Question

Je voudrais prendre une corde

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

et le transformer en un objet tel que

a.hostname == "example.com"

y

a.pathname == "/aa/bb"

Answer 1

La méthode moderne :

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

Retourne un objet avec des propriétés hostname y pathname ainsi que quelques autres .

Le premier argument est une URL relative ou absolue ; si elle est relative, vous devez spécifier le deuxième argument (l'URL de base). Par exemple, pour une URL relative à la page actuelle :

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

En plus des navigateurs, cette API est également disponible en Node.js depuis la v7, par require('url').URL .

Answer 2

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"

Answer 3

Trouvé 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"

Answer 4

Voici une fonction simple utilisant une regexp qui imite la fonction a le comportement des balises.

Pour

• comportement prévisible (pas de problèmes liés aux différents navigateurs)
• n'a pas besoin du DOM
• c'est vraiment court.

Cons

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

EDITAR:

Voici une décomposition 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);

Answer 5

La réponse de freddiefujiwara est assez bonne mais j'avais également besoin de prendre en charge les URL 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);

Exemple :

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