URL'den protokol, alan adı ve bağlantı noktası alın

Belirli bir URL'den tam protokol, etki alanı ve bağlantı noktasını ayıklamak gerekiyor. Örneğin:

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

önce mevcut adresi al

var url = window.location.href

Sonra bu dizeyi ayrıştırın

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

url’niz:

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

Bu yardımcı olur umarım

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

Bu yanıtların hiçbiri, özellikle geçerli sayfanın URL'sini değil, rastgele bir URL gerektiren soruyu tamamen ele almıyor gibi görünüyor.

Yöntem 1: URL API'sini kullanma (uyarı: IE11 desteği yok)

URL API'sını kullanabilirsiniz (IE11 tarafından desteklenmez, ancak başka her yerde kullanılabilir ).

Bu aynı zamanda arama parametrelerine erişmeyi de kolaylaştırır . Başka bir bonus: DOM'ye bağlı olmadığı için bir Web Çalışanı'nda kullanılabilir.

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

Yöntem 2 (eski yol): DOM'da tarayıcının yerleşik ayrıştırıcısını kullanma

Eski tarayıcılarda da çalışmak için buna ihtiyacınız varsa bunu kullanın.

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

Bu kadar!

Tarayıcının yerleşik ayrıştırıcısı işini çoktan yaptı. Şimdi ihtiyacınız olan parçaları alabilirsiniz (bunun yukarıdaki her iki yöntemde de işe yaradığını unutmayın):

//  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: Arama parametreleri

'? StartIndex = 1 & pageSize = 10' kendi başına çok kullanışlı olmadığından, büyük olasılıkla arama URL parametrelerini de ayırmak isteyeceksinizdir.

Yukarıdaki Yöntem 1'i (URL API) kullandıysanız, sadece searchParams alıcılarını kullanın:

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

Veya tüm parametreleri almak için:

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

Yöntem 2'yi (eski yol) kullandıysanız, şöyle bir şey kullanabilirsiniz:

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

Nedense bütün cevaplar aşırıya kaçıyor. Tüm gereken bu:

window.location.origin

Daha fazla ayrıntıyı burada bulabilirsiniz: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

Daha önce de belirtildiği gibi henüz tam olarak desteklenmemiştir, window.location.originancak onu kullanmak veya kullanmak için yeni bir değişken oluşturmak yerine, onu kontrol etmeyi ve ayarlamak için ayarlanmamışsa kontrol etmeyi tercih ederim.

Örneğin;

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

Aslında bu konuda birkaç ay önce yazdım Bir pencere için düzeltme.location.origin

evsahibi

var url = window.location.host;

İadeler localhost:2679

hostname

var url = window.location.hostname;

İadeler localhost

window.location.origin aynı şeyi elde etmek için yeterli olacaktır.

Protokol özelliği, iki nokta üst üste (:) dahil olmak üzere geçerli URL'nin protokolünü ayarlar veya döndürür.

Bu, yalnızca HTTP / HTTPS bölümünü almak istiyorsanız, bunun gibi bir şey yapabileceğiniz anlamına gelir:

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

Alan adı için şunları kullanabilirsiniz:

var domain = window.location.hostname;

Bağlantı noktası için şunları kullanabilirsiniz:

var port = window.location.port;

URL'de görünmüyorsa bağlantı noktasının boş bir dize olacağını unutmayın. Örneğin:

• http://example.com/ bağlantı noktası için "" döndürecek
• http://example.com:80/ bağlantı noktası için 80 döndürür

Liman kullanımınız olmadığında 80/443 göstermeniz gerekiyorsa

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

Neden kullanmıyorsunuz:

let full = window.location.origin

Gerçekten de, window.location.origin , tarayıcılara standartlara uygun olarak iyi çalışır, ancak ne olduğunu tahmin edin. IE standartları takip etmiyor.

Bu nedenle, IE, FireFox ve Chrome'da benim için çalışan bu oldu:

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

ancak çakışmalara neden olabilecek gelecekteki olası geliştirmeler için, "location" nesnesinden önce "window" referansını belirledim.

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

İşte kullandığım çözüm:

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

DÜZENLE:

Tarayıcılar arası uyumluluk eklemek için aşağıdakileri kullanın:

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

Bir şeyleri doğrulamak / ayıklamak veya hatta basit bir ayrıştırma yapmak istediğinizde oldukça yararlı olacak normal bir ifade (Regex) kullanmayı deneyin.

Normal ifade:

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

gösteri:

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]

Artık doğrulama da yapabilirsiniz.

Tüm tarayıcılarda çalışan basit yanıt:

let origin;

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

origin = window.location.origin;

Yapılandırılabilir parametrelerle ES6 stili.

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