Rufen Sie Protokoll, Domäne und Port von der URL ab

Ich muss das vollständige Protokoll, die Domäne und den Port von einer bestimmten URL extrahieren. Zum Beispiel:

https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181

Holen Sie sich zuerst die aktuelle Adresse

var url = window.location.href

Dann analysieren Sie einfach diese Zeichenfolge

var arr = url.split("/");

Ihre URL lautet:

var result = arr[0] + "//" + arr[2]

Hoffe das hilft

var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

Keine dieser Antworten scheint die Frage vollständig zu beantworten, die eine beliebige URL erfordert, nicht speziell die URL der aktuellen Seite.

Methode 1: Verwenden Sie die URL-API (Einschränkung: keine IE11-Unterstützung)

Sie können die URL-API verwenden (nicht von IE11 unterstützt, aber überall verfügbar ).

Dies erleichtert auch den Zugriff auf Suchparameter . Ein weiterer Bonus: Es kann in einem Web Worker verwendet werden, da es nicht vom DOM abhängt.

const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

Methode 2 (alte Methode): Verwenden Sie den im DOM integrierten Parser des Browsers

Verwenden Sie diese Option, wenn Sie dies auch für ältere Browser benötigen.

//  Create an anchor element (note: no need to append this element to the document)
const url = document.createElement('a');
//  Set href to any path
url.setAttribute('href', 'http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

Das ist es!

Der eingebaute Parser des Browsers hat seine Arbeit bereits erledigt. Jetzt können Sie einfach die Teile greifen, die Sie benötigen (beachten Sie, dass dies für beide oben genannten Methoden funktioniert):

//  Get any piece of the url you're interested in
url.hostname;  //  'example.com'
url.port;      //  12345
url.search;    //  '?startIndex=1&pageSize=10'
url.pathname;  //  '/blog/foo/bar'
url.protocol;  //  'http:'

Bonus: Suchparameter

Möglicherweise möchten Sie auch die Such-URL-Parameter aufteilen, da '? StartIndex = 1 & pageSize = 10' für sich genommen nicht allzu verwendbar ist.

Wenn Sie oben Methode 1 (URL-API) verwendet haben, verwenden Sie einfach die searchParams-Getter:

url.searchParams.get('startIndex');  // '1'

Oder um alle Parameter zu erhalten:

function searchParamsToObj(searchParams) {
  const paramsMap = Array
    .from(url.searchParams)
    .reduce((params, [key, val]) => params.set(key, val), new Map());
  return Object.fromEntries(paramsMap);
}
searchParamsToObj(url.searchParams);
// -> { startIndex: '1', pageSize: '10' }

Wenn Sie Methode 2 (die alte Methode) verwendet haben, können Sie Folgendes verwenden:

// Simple object output (note: does NOT preserve duplicate keys).
var params = url.search.substr(1); // remove '?' prefix
params
    .split('&')
    .reduce((accum, keyval) => {
        const [key, val] = keyval.split('=');
        accum[key] = val;
        return accum;
    }, {});
// -> { startIndex: '1', pageSize: '10' }

Aus irgendeinem Grund sind alle Antworten übertrieben. Das ist alles was es braucht:

window.location.origin

Weitere Details finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

Wie bereits erwähnt, gibt es die noch nicht vollständig unterstützte, window.location.originaber anstatt sie entweder zu verwenden oder eine neue Variable zu erstellen, überprüfe ich sie lieber und wenn sie nicht festgelegt ist, um sie festzulegen.

Beispielsweise;

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

Ich habe tatsächlich vor ein paar Monaten darüber geschrieben. Ein Fix für window.location.origin

Wirt

var url = window.location.host;

kehrt zurück localhost:2679

Hostname

var url = window.location.hostname;

kehrt zurück localhost

window.location.origin wird ausreichen, um das gleiche zu bekommen.

Die Protokolleigenschaft legt das Protokoll der aktuellen URL fest oder gibt es zurück, einschließlich des Doppelpunkts (:).

Dies bedeutet, dass Sie Folgendes tun können, wenn Sie nur den HTTP / HTTPS-Teil erhalten möchten:

var protocol = window.location.protocol.replace(/:/g,'')

Für die Domain können Sie verwenden:

var domain = window.location.hostname;

Für den Port können Sie verwenden:

var port = window.location.port;

Beachten Sie, dass der Port eine leere Zeichenfolge ist, wenn er in der URL nicht sichtbar ist. Zum Beispiel:

• http://example.com/ gibt "" für den Port zurück
• http://example.com:80/ gibt 80 für den Port zurück

Wenn Sie 80/443 anzeigen müssen, wenn Sie keinen Port verwenden

var port = window.location.port || (protocol === 'https' ? '443' : '80');

Warum nicht verwenden:

let full = window.location.origin

In der Tat funktioniert window.location.origin in Browsern nach Standards einwandfrei , aber raten Sie mal. IE folgt nicht den Standards.

Aus diesem Grund hat dies in IE, FireFox und Chrome für mich funktioniert:

var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

Für mögliche zukünftige Verbesserungen, die Konflikte verursachen könnten, habe ich die Referenz "Fenster" vor dem Objekt "Standort" angegeben.

var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':'+window.location.port: '');

Hier ist die Lösung, die ich verwende:

const result = `${ window.location.protocol }//${ window.location.host }`;

BEARBEITEN:

Verwenden Sie Folgendes, um die browserübergreifende Kompatibilität zu erhöhen:

const result = `${ window.location.protocol }//${ window.location.hostname + (window.location.port ? ':' + window.location.port: '') }`;

var http = location.protocol;
var slashes = http.concat("//");
var host = slashes.concat(window.location.hostname);

var getBasePath = function(url) {
    var r = ('' + url).match(/^(https?:)?\/\/[^/]+/i);
    return r ? r[0] : '';
};

Verwenden Sie einen regulären Ausdruck (Regex), der sehr nützlich ist, wenn Sie Inhalte validieren / extrahieren oder sogar eine einfache Analyse in Javascript durchführen möchten.

Der reguläre Ausdruck ist:

/([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/

Demonstration:

function breakURL(url){

     matches = /([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/.exec(url);

     foo = new Array();

     if(matches){
          for( i = 1; i < matches.length ; i++){ foo.push(matches[i]); }
     }

     return foo
}

url = "https://www.google.co.uk:55699/search?q=http%3A%2F%2F&oq=http%3A%2F%2F&aqs=chrome..69i57j69i60l3j69i65l2.2342j0j4&sourceid=chrome&ie=UTF-8"


breakURL(url);       // [https, www.google.co.uk, 55699] 
breakURL();          // []
breakURL("asf");     // []
breakURL("asd://");  // []
breakURL("asd://a"); // [asd, a, undefined]

Jetzt können Sie auch eine Validierung durchführen.

Einfache Antwort, die für alle Browser funktioniert:

let origin;

if (!window.location.origin) {
  origin = window.location.protocol + "//" + window.location.hostname + 
     (window.location.port ? ':' + window.location.port: '');
}

origin = window.location.origin;

ES6-Stil mit konfigurierbaren Parametern.

/**
 * Get the current URL from `window` context object.
 * Will return the fully qualified URL if neccessary:
 *   getCurrentBaseURL(true, false) // `http://localhost/` - `https://localhost:3000/`
 *   getCurrentBaseURL(true, true) // `http://www.example.com` - `https://www.example.com:8080`
 *   getCurrentBaseURL(false, true) // `www.example.com` - `localhost:3000`
 *
 * @param {boolean} [includeProtocol=true]
 * @param {boolean} [removeTrailingSlash=false]
 * @returns {string} The current base URL.
 */
export const getCurrentBaseURL = (includeProtocol = true, removeTrailingSlash = false) => {
  if (!window || !window.location || !window.location.hostname || !window.location.protocol) {
    console.error(
      `The getCurrentBaseURL function must be called from a context in which window object exists. Yet, window is ${window}`,
      [window, window.location, window.location.hostname, window.location.protocol],
    )
    throw new TypeError('Whole or part of window is not defined.')
  }

  const URL = `${includeProtocol ? `${window.location.protocol}//` : ''}${window.location.hostname}${
    window.location.port ? `:${window.location.port}` : ''
  }${removeTrailingSlash ? '' : '/'}`

  // console.log(`The URL is ${URL}`)

  return URL
}

window.location.protocol + '//' + window.location.host