Obtenir le protocole, le domaine et le port depuis l'URL

J'ai besoin d'extraire le protocole complet, le domaine et le port d'une URL donnée. Par exemple:

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

obtenir d'abord l'adresse actuelle

var url = window.location.href

Ensuite, il suffit d'analyser cette chaîne

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

votre URL est:

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

J'espère que cela t'aides

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

Aucune de ces réponses ne semble répondre complètement à la question, qui appelle une URL arbitraire, pas spécifiquement l'URL de la page actuelle.

Méthode 1: utilisez l'API URL (mise en garde: pas de prise en charge IE11)

Vous pouvez utiliser l' API URL (non prise en charge par IE11, mais disponible partout ailleurs ).

Cela facilite également l'accès aux paramètres de recherche . Autre bonus: il peut être utilisé dans un Web Worker car il ne dépend pas du DOM.

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

Méthode 2 (ancienne méthode): utilisez l'analyseur intégré du navigateur dans le DOM

Utilisez-le si vous en avez besoin pour fonctionner également sur des navigateurs plus anciens.

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

C'est tout!

L'analyseur intégré du navigateur a déjà fait son travail. Maintenant, vous pouvez simplement saisir les pièces dont vous avez besoin (notez que cela fonctionne pour les deux méthodes ci-dessus):

//  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: paramètres de recherche

Il y a de fortes chances que vous souhaitiez également séparer les paramètres d'URL de recherche, car '? StartIndex = 1 & pageSize = 10' n'est pas trop utilisable en soi.

Si vous avez utilisé la méthode 1 (API URL) ci-dessus, vous utilisez simplement les getters searchParams:

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

Ou pour obtenir tous les paramètres:

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

Si vous avez utilisé la méthode 2 (à l'ancienne), vous pouvez utiliser quelque chose comme ceci:

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

Pour une raison quelconque, toutes les réponses sont toutes excessives. C'est tout ce qu'il faut:

window.location.origin

Plus de détails peuvent être trouvés ici: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

Comme cela a déjà été mentionné, il n'y a pas encore de prise en charge complète, window.location.originmais au lieu de l'utiliser ou de créer une nouvelle variable à utiliser, je préfère la vérifier et si elle n'est pas définie pour la définir.

Par exemple;

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

J'ai écrit à ce sujet il y a quelques mois Un correctif pour window.location.origin

hôte

var url = window.location.host;

Retour localhost:2679

nom d'hôte

var url = window.location.hostname;

Retour localhost

window.location.origin sera suffisant pour obtenir la même chose.

La propriété de protocole définit ou renvoie le protocole de l'URL actuelle, y compris les deux points (:).

Cela signifie que si vous souhaitez obtenir uniquement la partie HTTP / HTTPS, vous pouvez faire quelque chose comme ceci:

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

Pour le domaine, vous pouvez utiliser:

var domain = window.location.hostname;

Pour le port, vous pouvez utiliser:

var port = window.location.port;

Gardez à l'esprit que le port sera une chaîne vide s'il n'est pas visible dans l'URL. Par exemple:

• http://example.com/ renverra "" pour le port
• http://example.com:80/ renverra 80 pour le port

Si vous devez afficher 80/443 lorsque vous n'avez pas d'utilisation de port

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

Pourquoi ne pas utiliser:

let full = window.location.origin

En effet, window.location.origin fonctionne bien dans les navigateurs suivant les normes, mais devinez quoi. IE ne suit pas les normes.

Donc à cause de cela, c'est ce qui a fonctionné pour moi dans IE, FireFox et Chrome:

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

mais pour d'éventuelles améliorations futures susceptibles de provoquer des conflits, j'ai spécifié la référence "window" avant l'objet "location".

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

Voici la solution que j'utilise:

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

ÉDITER:

Pour ajouter la compatibilité entre navigateurs, utilisez ce qui suit:

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] : '';
};

Essayez d'utiliser une expression régulière (Regex), qui sera très utile lorsque vous souhaitez valider / extraire des éléments ou même effectuer une simple analyse en javascript.

Le regex est:

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

Manifestation:

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]

Maintenant, vous pouvez également effectuer la validation.

Réponse simple qui fonctionne pour tous les navigateurs:

let origin;

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

origin = window.location.origin;

Style ES6 avec paramètres configurables.

/**
 * 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