¿Cómo analizo una URL en nombre de host y ruta en javascript?

7 minutos de lectura

¿Como analizo una URL en nombre de host y ruta
freddiefujiwara

me gustaría tomar una cuerda

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

y procesarlo en un objeto tal que

a.hostname == "example.com"

y

a.pathname == "/aa/bb"

  • En caso de que esté trabajando en la URL actual, puede acceder hostname y pathname directamente desde el location objeto.

    – rvighne

    26 de junio de 2014 a las 14:54

  • ¿Qué pasa con “lastPathPart”?

    – Víctor

    30/11/2018 a las 15:00

  • No es expresión regular, pero el Módulo de Python tldextract hace esto exactamente: github.com/john-kurkowski/tldextract

    – Óliver Óliver

    15 de mayo de 2019 a las 0:20

1646962929 682 ¿Como analizo una URL en nombre de host y ruta
rvighne

La forma moderna:

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

Devuelve un objeto con propiedades. hostname y pathnamejunto con algunos otros.

El primer argumento es una URL relativa o absoluta; si es relativo, debe especificar el segundo argumento (la URL base). Por ejemplo, para una URL relativa a la página actual:

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

Además de los navegadores, esta API también está disponible en Node.js desde v7, hasta require('url').URL.

  • Tecnología experimental: ¡IE no admite esto! desarrollador.mozilla.org/en-US/docs/Web/API/URL/…

    – cwouter

    18 de marzo de 2015 a las 15:08

  • @cwouter: Sin embargo, funciona en Edge, que reemplaza a IE

    – rvighne

    24/06/2016 a las 20:35

  • esta es la forma de hacerlo, edge ya tiene 3 versiones encima de ie, así que no importa

    – Claudiu Creanga

    24 de agosto de 2016 a las 19:27

  • @justingordon: El URL class es un estándar web, por lo que no es necesario que los usuarios que no sean navegadores lo implementen. Sin embargo, las versiones recientes de Nodejs proporcionan una biblioteca idéntica, require('url').URL

    – rvighne

    19 de mayo de 2017 a las 4:25


  • El hecho de que JavaScript no tenga una forma integrada de analizar URL que funcione en navegadores o servidores es bastante triste…

    – Skiterm

    25 de abril de 2018 a las 0:24

¿Como analizo una URL en nombre de host y ruta
freddiefujiwara

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"

  • ¿Estás seguro de que esta es una solución compatible con varios navegadores?

    – cierre

    10 de abril de 2009 a las 9:55

  • Cabe señalar que, si bien esto puede ayudar/responder al póster original, esta respuesta solo funcionará para las personas que trabajan con JS en un navegador, ya que depende del DOM para hacer su trabajo.

    –Adam Batkin

    1 de agosto de 2009 a las 22:21

  • Otro ejemplo de sencillez, junto a ingenio.

    – Said Neamati

    21 de febrero de 2012 a las 13:50

  • No funciona en IE si el href es relativo. l.hostname estará vacío. Si solo proporciona URL completas, esto funcionará.

    – Derek Prior

    6 sep 2012 a las 18:21


  • Incluso con URL absolutas, IE (probado en IE 11) se comporta de manera diferente a Chrome y Firefox. IE pathname elimina la barra diagonal inicial, mientras que los otros navegadores no lo hacen. Entonces terminarás con /path o pathdependiendo de su navegador.

    – Verdadera Voluntad

    09/04/2015 a las 19:00

¿Como analizo una URL en nombre de host y ruta
jose oster

encontrado aquí: 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"

  • Tenga en cuenta que si solo desea obtener las partes analizadas de la ubicación actual del navegador, las dos primeras líneas se convierten en parser = location; y todas las siguientes líneas funcionan. Lo probé en Chrome e IE9 hace un momento.

    – Lee Meador

    26/04/2013 a las 17:20

  • También tenga en cuenta que pathname no incluye la barra inclinada inicial en IE. Imagínate. 😀

    – nevelis

    21 de febrero de 2014 a las 6:45

  • Para IE, use “/” + parser.pathname

    – sbose

    27 de febrero de 2014 a las 11:07

  • Advertencia: volverá http: aunque pases solo domain.com a href (sin ningún protocolo). Quería usar esto para verificar si faltaba el protocolo, y si es así, podría agregarlo, pero asume http: por lo que no pude usarlo para este propósito.

    –Max Hodges

    30 de octubre de 2014 a las 6:27

  • El nombre de host en realidad incluye el protocolo. Prueba en la última versión de Chrome.

    – Juan

    23 de agosto de 2017 a las 15:47

¿Como analizo una URL en nombre de host y ruta
Rems

Aquí hay una función simple que usa una expresión regular que imita la a comportamiento de la etiqueta.

ventajas

  • Comportamiento predecible (sin problemas entre navegadores)
  • no necesita el DOM
  • es muy corto

Contras

  • La expresión regular es un poco difícil de leer.

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": "https://stackoverflow.com/"
    "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:

Aquí hay un desglose de la expresión regular.

var reURLInformation = new RegExp([
    '^(https?:)//', // protocol
    '(([^:/?#]*)(?::([0-9]+))?)', // host (hostname and port)
    '(/{0,1}[^?#]*)', // pathname
    '(\\?[^#]*|)', // search
    '(#.*|)$' // hash
].join(''));
var match = href.match(reURLInformation);

1646962930 871 ¿Como analizo una URL en nombre de host y ruta
pedro graham

var loc = window.location;  // => "http://example.com:3000/pathname/?search=test#hash"

devuelve la URL actual.

Si desea pasar su propia cadena como una url (no funciona en IE11):

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

Entonces puedes analizarlo como:

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"

1646962931 425 ¿Como analizo una URL en nombre de host y ruta
tessa

La respuesta de freddiefujiwara es bastante buena, pero también necesitaba admitir URL relativas dentro de Internet Explorer. Se me ocurrió la siguiente solución:

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

Ahora úselo para obtener las propiedades necesarias:

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

Ejemplo:

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

1646962931 625 ¿Como analizo una URL en nombre de host y ruta
rex m

js-uri (disponible en Google Code) toma una URL de cadena y resuelve un objeto URI a partir de ella:

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

  • ¡¡¡Gracias!!! pero quiero uri = nueva ubicación (“ejemplo.com/aa/bb”) tipode(ventana.ubicación) == tipode(uri)

    – freddie fujiwara

    10 de abril de 2009 a las 2:30

  • Dado que window.location es una cadena, realmente no veo cómo sería posible o útil. ¿Por qué los tipos deben coincidir cuando se puede convertir fácilmente de uno a otro?

    – Rex M

    10 de abril de 2009 a las 2:33

  • developer.mozilla.org/en/DOM/window.ubicación es muy buena api!! así que espero convertir String en objeto window.location

    – freddie fujiwara

    10 de abril de 2009 a las 2:48

  • La configuración de window.location cambia el navegador para que no suceda.

    – epascarello

    10 de abril de 2009 a las 3:06

  • Mmm, eso es correcto. window.location no es una cadena, pero se puede asignar desde una cadena. No estoy seguro de si eso se puede imitar, he intentado asignar el prototipo de ubicación a un nuevo objeto uri pero eso no funcionó.

    – Rex M

    10 de abril de 2009 a las 3:53

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad