Estoy tratando de encontrar un método relativamente fácil y confiable para extraer la URL base de una variable de cadena usando JavaScript (o jQuery).

Por ejemplo, dado algo como:

http://www.sitename.com/article/2009/09/14/this-is-an-article/

Me gustaría obtener:

http://www.sitename.com/

¿Es una expresión regular la mejor apuesta? Si es así, ¿qué enunciado podría usar para asignar la URL base extraída de una cadena dada a una nueva variable?

He buscado un poco sobre esto, pero todo lo que encuentro en el mundo de JavaScript parece girar en torno a la recopilación de esta información de la URL del documento real usando location.host o similar.

Editar: Algunos se quejan de que no tiene en cuenta el protocolo. Así que decidí actualizar el código, ya que está marcado como respuesta. Para aquellos a los que les gusta el código de una línea ... bueno, lamento por eso que usamos minimizadores de código, el código debería ser legible por humanos y de esta manera es mejor ... en mi opinión.

var pathArray = "https://somedomain.com".split( '/' );
var protocol = pathArray[0];
var host = pathArray[2];
var url = protocol + '//' + host;

O use la solución Davids desde abajo.

Los navegadores basados ​​en WebKit, Firefox a partir de la versión 21 y las versiones actuales de Internet Explorer (IE 10 y 11) implementan location.origin.

location.originincluye el protocolo , el dominio y opcionalmente el puerto de la URL.

Por ejemplo, location.originde la URL http://www.sitename.com/article/2009/09/14/this-is-an-article/es http://www.sitename.com.

Para apuntar a navegadores sin soporte para location.originusar el siguiente polyfill conciso:

if (typeof location.origin === 'undefined')
    location.origin = location.protocol + '//' + location.host;

No es necesario usar jQuery, solo use

location.hostname

No hay razón para hacer divisiones para obtener la ruta, el nombre de host, etc. de una cadena que es un enlace. Solo necesitas usar un enlace

//create a new element link with your link
var a = document.createElement("a");
a.href="http://www.sitename.com/article/2009/09/14/this-is-an-article/";

//hide it from view when it is added
a.style.display="none";

//add it
document.body.appendChild(a);

//read the links "features"
alert(a.protocol);
alert(a.hostname)
alert(a.pathname)
alert(a.port);
alert(a.hash);

//remove it
document.body.removeChild(a);

Puede hacerlo fácilmente con jQuery agregando el elemento y leyendo su atributo.

var host = location.protocol + '//' + location.host + '/';

String.prototype.url = function() {
  const a = $('<a />').attr('href', this)[0];
  // or if you are not using jQuery 👇🏻
  // const a = document.createElement('a'); a.setAttribute('href', this);
  let origin = a.protocol + '//' + a.hostname;
  if (a.port.length > 0) {
    origin = `${origin}:${a.port}`;
  }
  const {host, hostname, pathname, port, protocol, search, hash} = a;
  return {origin, host, hostname, pathname, port, protocol, search, hash};

}

Luego :

'http://mysite:5050/pke45#23'.url()
 //OUTPUT : {host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050", protocol: "http:",hash:"#23",origin:"http://mysite:5050"}

Para su solicitud, necesita:

 'http://mysite:5050/pke45#23'.url().origin

Revisión 07-2017: también puede ser más elegante y tiene más características

const parseUrl = (string, prop) =>  {
  const a = document.createElement('a'); 
  a.setAttribute('href', string);
  const {host, hostname, pathname, port, protocol, search, hash} = a;
  const origin = `${protocol}//${hostname}${port.length ? `:${port}`:''}`;
  return prop ? eval(prop) : {origin, host, hostname, pathname, port, protocol, search, hash}
}

Luego

parseUrl('http://mysite:5050/pke45#23')
// {origin: "http://mysite:5050", host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050"…}


parseUrl('http://mysite:5050/pke45#23', 'origin')
// "http://mysite:5050"

¡Frio!

Si está utilizando jQuery, esta es una forma genial de manipular elementos en JavaScript sin agregarlos al DOM:

var myAnchor = $("<a />");

//set href    
myAnchor.attr('href', 'http://example.com/path/to/myfile')

//your link's features
var hostname = myAnchor.attr('hostname'); // http://example.com
var pathname = myAnchor.attr('pathname'); // /path/to/my/file
//...etc

Un enfoque ligero pero completo para obtener valores básicos de una representación de cadena de una URL es la regla de expresión regular de Douglas Crockford:

var yourUrl = "http://www.sitename.com/article/2009/09/14/this-is-an-article/";
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var parts = parse_url.exec( yourUrl );
var result = parts[1]+':'+parts[2]+parts[3]+'/' ;

Si está buscando un kit de herramientas de manipulación de URL más potente, pruebe URI.js. Es compatible con getters, setter, normalización de URL, etc., todo con una buena API encadenable.

Si está buscando un complemento jQuery, jquery.url.js debería ayudarlo

Una forma más sencilla de hacerlo es mediante el uso de un elemento de anclaje, como sugirió @epascarello. Esto tiene la desventaja de que tiene que crear un elemento DOM. Sin embargo, esto se puede almacenar en caché en un cierre y reutilizar para múltiples URL:

var parseUrl = (function () {
  var a = document.createElement('a');
  return function (url) {
    a.href = url;
    return {
      host: a.host,
      hostname: a.hostname,
      pathname: a.pathname,
      port: a.port,
      protocol: a.protocol,
      search: a.search,
      hash: a.hash
    };
  }
})();

Úselo así:

paserUrl('http://google.com');

Bueno, el objeto URL API evita dividir y construir las URL manualmente.

 let url = new URL('/programming/1420881');
 alert(url.origin);

Si está extrayendo información de window.location.href (la barra de direcciones), use este código para obtener http://www.sitename.com/:

var loc = location;
var url = loc.protocol + "//" + loc.host + "/";

Si tiene una cadena, stresa es una URL arbitraria (no window.location.href), entonces use expresiones regulares:

var url = str.match(/^(([a-z]+:)?(\/\/)?[^\/]+\/).*$/)[1];

Yo, como todos en el Universo, odio leer expresiones regulares, así que lo desglosaré en inglés:

• Encuentre cero o más caracteres alfabéticos seguidos de dos puntos (el protocolo, que puede omitirse)
• Seguido de // (también se puede omitir)
• Seguido de cualquier carácter excepto / (el nombre de host y el puerto)
• Seguido por /
• Seguido por lo que sea (el camino, menos el principio /).

No es necesario crear elementos DOM ni hacer nada loco.

Utilizo una expresión regular simple que extrae el host de la url:

function get_host(url){
    return url.replace(/^((\w+:)?\/\/[^\/]+\/?).*$/,'$1');
}

y úsalo así

var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/'
var host = get_host(url);

Nota, si el urlno termina con un /el hostno va a terminar en una /.

Aquí hay algunas pruebas:

describe('get_host', function(){
    it('should return the host', function(){
        var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://www.sitename.com/');
    });
    it('should not have a / if the url has no /', function(){
        var url = 'http://www.sitename.com';
        assert.equal(get_host(url),'http://www.sitename.com');
    });
    it('should deal with https', function(){
        var url = 'https://www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'https://www.sitename.com/');
    });
    it('should deal with no protocol urls', function(){
        var url = '//www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'//www.sitename.com/');
    });
    it('should deal with ports', function(){
        var url = 'http://www.sitename.com:8080/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://www.sitename.com:8080/');
    });
    it('should deal with localhost', function(){
        var url = 'http://localhost/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://localhost/');
    });
    it('should deal with numeric ip', function(){
        var url = 'http://192.168.18.1/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://192.168.18.1/');
    });
});

Puede usar los siguientes códigos para obtener diferentes parámetros de la URL actual

alert("document.URL : "+document.URL);
alert("document.location.href : "+document.location.href);
alert("document.location.origin : "+document.location.origin);
alert("document.location.hostname : "+document.location.hostname);
alert("document.location.host : "+document.location.host);
alert("document.location.pathname : "+document.location.pathname);

function getBaseURL() {
    var url = location.href;  // entire url including querystring - also: window.location.href;
    var baseURL = url.substring(0, url.indexOf('/', 14));


    if (baseURL.indexOf('http://localhost') != -1) {
        // Base Url for localhost
        var url = location.href;  // window.location.href;
        var pathname = location.pathname;  // window.location.pathname;
        var index1 = url.indexOf(pathname);
        var index2 = url.indexOf("/", index1 + 1);
        var baseLocalUrl = url.substr(0, index2);

        return baseLocalUrl + "/";
    }
    else {
        // Root Url for domain name
        return baseURL + "/";
    }

}

Entonces puedes usarlo así ...

var str = 'http://en.wikipedia.org/wiki/Knopf?q=1&t=2';
var url = str.toUrl();

El valor de url será ...

{
"original":"http://en.wikipedia.org/wiki/Knopf?q=1&t=2",<br/>"protocol":"http:",
"domain":"wikipedia.org",<br/>"host":"en.wikipedia.org",<br/>"relativePath":"wiki"
}

La "var url" también contiene dos métodos.

var paramQ = url.getParameter('q');

En este caso, el valor de paramQ será 1.

var allParameters = url.getParameters();

El valor de allParameters serán solo los nombres de los parámetros.

["q","t"]

Probado en IE, Chrome y Firefox.

En lugar de tener que tener en cuenta window.location.protocol y window.location.origin, y posiblemente perder un número de puerto específico, etc., simplemente tome todo hasta el 3er "/":

// get nth occurrence of a character c in the calling string
String.prototype.nthIndex = function (n, c) {
    var index = -1;
    while (n-- > 0) {
        index++;
        if (this.substring(index) == "") return -1; // don't run off the end
        index += this.substring(index).indexOf(c);
    }
    return index;
}

// get the base URL of the current page by taking everything up to the third "/" in the URL
function getBaseURL() {
    return document.URL.substring(0, document.URL.nthIndex(3,"/") + 1);
}

Esto funciona:

location.href.split(location.pathname)[0];

Puedes hacerlo usando una expresión regular:

/(http:\/\/)?(www)[^\/]+\//i

encaja ?

Para obtener el origen de cualquier URL, incluidas las rutas dentro de un sitio web ( /my/path) o sin esquema ( //example.com/my/path), o completo ( http://example.com/my/path) , armé una función rápida.

En el fragmento a continuación, las tres llamadas deben registrarse https://stacksnippets.net.

function getOrigin(url)
{
  if(/^\/\//.test(url))
  { // no scheme, use current scheme, extract domain
    url = window.location.protocol + url;
  }
  else if(/^\//.test(url))
  { // just path, use whole origin
    url = window.location.origin + url;
  }
  return url.match(/^([^/]+\/\/[^/]+)/)[0];
}

console.log(getOrigin('https://stacksnippets.net/my/path'));
console.log(getOrigin('//stacksnippets.net/my/path'));
console.log(getOrigin('/my/path'));

Esto funciona para mí:

var getBaseUrl = function (url) {
  if (url) {
    var parts = url.split('://');
    
    if (parts.length > 1) {
      return parts[0] + '://' + parts[1].split('/')[0] + '/';
    } else {
      return parts[0].split('/')[0] + '/';
    }
  }
};

var tilllastbackslashregex = new RegExp(/^.*\//);
baseUrl = tilllastbackslashregex.exec(window.location.href);

window.location.href proporciona la dirección URL actual de la barra de direcciones del navegador

puede ser algo como https://stackoverflow.com/abc/xyz o https://www.google.com/search?q=abc tilllastbackslashregex.exec () ejecute regex y vuelva a ejecutar la cadena coincidente hasta la última barra invertida, es decir, https : //stackoverflow.com/abc/ o https://www.google.com/ respectivamente

Una buena manera es usar el URLobjeto de API nativa de JavaScript . Esto proporciona muchas partes útiles de url.

Por ejemplo:

const url = '/programming/1420881/how-to-extract-base-url-from-a-string-in-javascript'

const urlObject = new URL(url);

console.log(urlObject);


// RESULT: 
//________________________________
hash: "",
host: "stackoverflow.com",
hostname: "stackoverflow.com",
href: "/programming/1420881/how-to-extract-base-url-from-a-string-in-javascript",
origin: "https://stackoverflow.com",
password: "",
pathname: "/questions/1420881/how-to-extract-base-url-from-a-string-in-javaript",
port: "",
protocol: "https:",
search: "",
searchParams: [object URLSearchParams]
... + some other methods

Como puede ver aquí, puede acceder a lo que necesite.

Por ejemplo: console.log(urlObject.host); // "stackoverflow.com"

doc para URL