JavaScript (veya jQuery) kullanarak bir dize değişkeninden temel URL ayıklamak için nispeten kolay ve güvenilir bir yöntem bulmaya çalışıyorum.

Örneğin, şöyle bir şey verildi:

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

Almak istiyorum:

http://www.sitename.com/

Düzenli bir ifade en iyi bahis midir? Öyleyse, belirli bir dizeden çıkarılan temel URL'yi yeni bir değişkene atamak için hangi ifadeyi kullanabilirim?

Bununla ilgili bazı aramalar yaptım, ancak JavaScript dünyasında bulduğum her şey, location.host veya benzerlerini kullanarak gerçek belge URL'sinden bu bilgileri toplama etrafında dönüyor gibi görünüyor .

Düzenleme: Bazı şikayet protokolü dikkate almaz şikayet. Bu yüzden cevap olarak işaretlendiği için kodu yükseltmeye karar verdim. Tek satırlık kodu sevenler için ... kod küçültücüleri kullandığımız için üzgünüm, kod insan tarafından okunabilir olmalı ve bu şekilde daha iyi ... bence.

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

Veya aşağıdan Davids çözümünü kullanın .

WebKit tabanlı tarayıcılar, 21 sürümü itibariyle Firefox ve Internet Explorer'ın (IE 10 ve 11) geçerli sürümlerini uygular location.origin.

location.originiçeren protokol , domain isteğe ve liman URL.

Örneğin, location.originURL http://www.sitename.com/article/2009/09/14/this-is-an-article/olduğunu http://www.sitename.com.

location.originAşağıdaki özlü çoklu dolguyu kullanma desteği olmayan tarayıcıları hedeflemek için :

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

JQuery kullanmanıza gerek yok, sadece

location.hostname

Bağlantı olan bir dizeden yolu, ana bilgisayar adını vb. Almak için bölünmeler yapmanın bir nedeni yoktur. Sadece bir bağlantı kullanmanız gerekiyor

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

Bunu, öğeyi ekleyerek ve attr değerini okuyarak jQuery ile kolayca yapabilirsiniz.

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

}

Sonra :

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

İsteğiniz için ihtiyacınız olanlar:

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

İnceleme 07-2017: Daha zarif olabilir ve daha fazla özelliğe sahiptir

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

Sonra

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"

Güzel!

JQuery kullanıyorsanız, bu, javascript içindeki öğeleri DOM'a eklemeden değiştirmek için harika bir yoldur:

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

Bir URL'nin dize olarak temsil edilmesinden temel değerleri elde etmeye yönelik hafif ancak eksiksiz bir yaklaşım Douglas Crockford'un normal ifade kuralıdır:

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]+'/' ;

Daha güçlü bir URL değiştirme araç takımı arıyorsanız URI.js'yi deneyin , setter, url normalizasyonu vb.

Bir jQuery Eklentisi arıyorsanız, jquery.url.js size yardımcı olmalıdır

Bunu yapmanın daha basit bir yolu @epascarello'nun önerdiği gibi bir bağlantı elemanı kullanmaktır. Bu, bir DOM Öğesi oluşturmanız gereken dezavantaja sahiptir. Ancak, bu bir kapakta önbelleğe alınabilir ve birden fazla URL için yeniden kullanılabilir:

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

Şöyle kullanın:

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

URL API nesnesi , URL'lerin manuel olarak bölünmesini ve oluşturulmasını önler.

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

Window.location.href'den (adres çubuğu) bilgi çıkarıyorsanız, şu kodu kullanın http://www.sitename.com/:

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

Bir strdizeniz varsa , bu rastgele bir URL'dir (window.location.href değil), ardından normal ifadeleri kullanın:

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

Evrendeki herkes gibi, düzenli ifadeler okumaktan nefret ediyorum, bu yüzden onu İngilizce olarak parçalayacağım:

• Sıfır veya daha fazla alfa karakteri ve ardından iki nokta üst üste işaretini (atlanabilir protokol) bulun
• Ardından // (ayrıca atlanabilir)
• Ardından / (ana bilgisayar adı ve bağlantı noktası) dışındaki tüm karakterler gelir
• Bunu takiben /
• Ardından ne olursa olsun (yol daha az başlangıç ​​/).

DOM öğeleri oluşturmaya veya çılgınca bir şey yapmaya gerek yok.

Ben url ana bilgisayardan ayıklar basit bir regex kullanın:

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

ve böyle kullan

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

Eğer Not urla ile bitmez bir sona ermeyecek ./host/

İşte bazı testler:

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

Mevcut URL'nin farklı parametrelerini almak için aşağıdaki kodları kullanabilirsiniz

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

}

Daha sonra böyle kullanabilirsiniz ...

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

URL'nin değeri ...

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

"Var url" de iki yöntem içerir.

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

Bu durumda paramQ değeri 1 olacaktır.

var allParameters = url.getParameters();

AllParameters değeri yalnızca parametre adları olacaktır.

["q","t"]

IE, krom ve firefox'ta test edildi.

Window.location.protocol ve window.location.origin'i hesaba katmak yerine ve muhtemelen belirli bir bağlantı noktası numarasını vb. Kaçırmak yerine, yalnızca 3. "/" e kadar olan her şeyi alın:

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

Bu çalışıyor:

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

Bir normal ifadeyi kullanarak bunu yapabilirsiniz:

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

uygun mu ?

Bir web sitesi ( /my/path) veya schemaless ( //example.com/my/path) veya full ( http://example.com/my/path) içindeki yollar da dahil olmak üzere herhangi bir url'nin kökenini almak için hızlı bir işlev bir araya getirdim.

Aşağıdaki snippet'te üç çağrının da günlüğe kaydedilmesi gerekir 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'));

Bu benim için çalışıyor:

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 geçerli URL adresini tarayıcı adres çubuğundan verir

https://stackoverflow.com/abc/xyz veya https://www.google.com/search?q=abc tilllastbackslashregex.exec () normal ifadeyi çalıştırmak ve eşleşen dizgiyi son ters eğik çizgiye kadar yeniden çalıştırmak gibi bir şey olabilir , yani https : //stackoverflow.com/abc/ veya https://www.google.com/ sırasıyla

İyi bir yol, JavaScript yerel API'sını kullanmaktır URL nesnesini . Bu, birçok yararlı url parçası sağlar.

Örneğin:

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

Burada görebileceğiniz gibi ihtiyacınız olan her şeye erişebilirsiniz.

Örneğin: console.log(urlObject.host); // "stackoverflow.com"

URL için doc