Sto cercando di trovare un metodo relativamente semplice e affidabile per estrarre l'URL di base da una variabile stringa utilizzando JavaScript (o jQuery).

Ad esempio, dato qualcosa come:

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

Vorrei ottenere:

http://www.sitename.com/

Un'espressione regolare è la scommessa migliore? In tal caso, quale istruzione posso usare per assegnare l'URL di base estratto da una determinata stringa a una nuova variabile?

Ho fatto qualche ricerca su questo, ma tutto ciò che trovo nel mondo JavaScript sembra ruotare attorno alla raccolta di queste informazioni dall'URL del documento reale utilizzando location.host o simili.

Modifica: alcuni si lamentano del fatto che non tiene conto del protocollo dell'account. Quindi ho deciso di aggiornare il codice, poiché è contrassegnato come risposta. Per coloro a cui piace il codice a una riga ... beh scusate questo perché utilizziamo i minimizzatori di codice, il codice dovrebbe essere leggibile dall'uomo e in questo modo è meglio ... secondo me.

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

Oppure usa la soluzione Davids dal basso.

I browser basati su WebKit, Firefox a partire dalla versione 21 e le attuali versioni di Internet Explorer (IE 10 e 11) implementano location.origin.

location.origininclude il protocollo , il dominio e facoltativamente la porta dell'URL.

Ad esempio, location.originl'URL http://www.sitename.com/article/2009/09/14/this-is-an-article/è http://www.sitename.com.

Per indirizzare i browser senza supporto per l' location.originuso del seguente conciso polyfill:

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

Non è necessario utilizzare jQuery, basta usare

location.hostname

Non vi è alcun motivo per eseguire divisioni per ottenere il percorso, il nome host, ecc. Da una stringa che è un collegamento. Devi solo usare un link

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

Puoi farlo facilmente con jQuery aggiungendo l'elemento e leggendo il suo attr.

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

}

Poi :

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

Per la tua richiesta, hai bisogno di:

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

Recensione 07-2017: può anche essere più elegante e ha più funzionalità

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

Poi

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"

Freddo!

Se stai usando jQuery, questo è un modo fantastico per manipolare elementi in javascript senza aggiungerli 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 approccio semplice ma completo per ottenere valori di base da una rappresentazione in formato stringa di un URL è la regola regexp di 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]+'/' ;

Se stai cercando un toolkit di manipolazione degli URL più potente, prova URI.js Supporta getter, setter, normalizzazione degli url ecc. Tutto con una bella API concatenabile.

Se stai cercando un plug-in jQuery, jquery.url.js dovrebbe aiutarti

Un modo più semplice per farlo è utilizzare un elemento di ancoraggio, come suggerito da @epascarello. Questo ha lo svantaggio di dover creare un elemento DOM. Tuttavia, questo può essere memorizzato nella cache in una chiusura e riutilizzato per più 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
    };
  }
})();

Usalo così:

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

Bene, l' oggetto API URL evita di dividere e costruire manualmente l'URL.

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

Se stai estraendo informazioni da window.location.href (la barra degli indirizzi), usa questo codice per ottenere http://www.sitename.com/:

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

Se si dispone di una stringa, strovvero un URL arbitrario (non window.location.href), utilizzare le espressioni regolari:

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

Io, come tutti nell'universo, odio leggere le espressioni regolari, quindi lo analizzerò in inglese:

• Trova zero o più caratteri alfa seguiti da due punti (il protocollo, che può essere omesso)
• Seguito da // (può anche essere omesso)
• Seguito da qualsiasi carattere tranne / (nome host e porta)
• Seguito da /
• Seguito da qualunque (il percorso, meno l'inizio /).

Non c'è bisogno di creare elementi DOM o fare qualcosa di folle.

Uso un regex semplice che estrae l'host dall'URL:

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

e usalo in questo modo

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

Nota, se il urlnon termina con un /il hostnon finirà in un /.

Ecco alcuni test:

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/');
    });
});

È possibile utilizzare i codici seguenti per ottenere diversi parametri dell'URL corrente

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 + "/";
    }

}

Quindi puoi usarlo in questo modo ...

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

Il valore di url sarà ...

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

Il "var url" contiene anche due metodi.

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

In questo caso il valore di paramQ sarà 1.

var allParameters = url.getParameters();

Il valore di allParameters sarà solo il nome del parametro.

["q","t"]

Testato su IE, Chrome e Firefox.

Invece di dover tenere conto di window.location.protocol e window.location.origin e possibilmente perdere un numero di porta specificato, ecc., Prendi tutto fino al 3 "/":

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

Questo funziona:

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

Puoi farlo usando un regex:

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

si adatta?

Per ottenere l'origine di qualsiasi URL, inclusi i percorsi all'interno di un sito Web ( /my/path) o schemaless ( //example.com/my/path) o full ( http://example.com/my/path), ho creato una funzione rapida.

Nel frammento di seguito, tutte e tre le chiamate dovrebbero essere registrate 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'));

Questo, funziona per me:

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 fornisce l'indirizzo url corrente dalla barra degli indirizzi del browser

può essere qualsiasi cosa come https://stackoverflow.com/abc/xyz o https://www.google.com/search?q=abc tilllastbackslashregex.exec () eseguire regex e risintonizzare la stringa corrispondente fino all'ultima barra rovesciata cioè https : //stackoverflow.com/abc/ o https://www.google.com/ rispettivamente

Un buon modo è usare l' URLoggetto API nativo JavaScript . Ciò fornisce molte parti utili dell'URL.

Per esempio:

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

Come puoi vedere qui puoi accedere a tutto ciò di cui hai bisogno.

Per esempio: console.log(urlObject.host); // "stackoverflow.com"

doc per URL