Próbuję znaleźć stosunkowo prostą i niezawodną metodę wyodrębnienia podstawowego adresu URL ze zmiennej ciągu za pomocą JavaScript (lub jQuery).

Na przykład, biorąc pod uwagę coś takiego:

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

Chciałbym dostać:

http://www.sitename.com/

Czy najlepszym rozwiązaniem jest wyrażenie regularne? Jeśli tak, jakiej instrukcji mogę użyć do przypisania podstawowego adresu URL wyodrębnionego z danego ciągu do nowej zmiennej?

Przeprowadziłem kilka poszukiwań, ale wszystko, co znajduję w świecie JavaScript, wydaje się kręcić wokół zbierania tych informacji z rzeczywistego adresu URL dokumentu za pomocą location.host lub podobnego.

Edycja: Niektórzy narzekają, że nie bierze pod uwagę protokołu. Postanowiłem więc zaktualizować kod, ponieważ jest oznaczony jako odpowiedź. Dla tych, którzy lubią kod jednowierszowy ... przepraszam, dlatego używamy minimalizatorów kodu, kod powinien być czytelny dla człowieka i tak jest lepiej ... moim zdaniem.

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

Lub użyj rozwiązania Davids od dołu.

Implementują przeglądarki oparte na WebKit, Firefox od wersji 21 i aktualne wersje Internet Explorer (IE 10 i 11) location.origin.

location.originzawiera protokół , domenę i opcjonalnie port adresu URL.

Na przykład location.originadres URL http://www.sitename.com/article/2009/09/14/this-is-an-article/tohttp://www.sitename.com .

Aby kierować reklamy na przeglądarki bez obsługi location.originnastępującego zwięzłego wypełnienia:

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

Nie musisz używać jQuery, po prostu użyj

location.hostname

Nie ma powodu, aby robić podziały, aby uzyskać ścieżkę, nazwę hosta itp. Z łańcucha, który jest łączem. Wystarczy użyć linku

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

Możesz to łatwo zrobić za pomocą jQuery dołączając element i czytając jego atr.

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

}

Następnie :

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

Do swojej prośby potrzebujesz:

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

Recenzja 07-2017: Może być również bardziej elegancki i ma więcej funkcji

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

Następnie

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"

Chłodny!

Jeśli używasz jQuery, jest to fajny sposób na manipulowanie elementami w javascript bez dodawania ich do 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

Lekkim, ale kompletnym podejściem do uzyskiwania podstawowych wartości z ciągu reprezentującego adres URL jest reguła wyrażenia regularnego Douglasa Crockforda:

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

Jeśli szukasz potężniejszego zestawu narzędzi do manipulacji adresami URL, wypróbuj URI.js Obsługuje , ustawiające, normalizację URL itp., A wszystko to z ładnym interfejsem API umożliwiającym łańcuch.

Jeśli szukasz wtyczki jQuery, to jquery.url.js powinien ci pomóc

Prostszym sposobem na to jest użycie elementu kotwicy, zgodnie z sugestią @epascarello. Ma to tę wadę, że musisz utworzyć element DOM. Można to jednak zapisać w pamięci podręcznej w zamknięciu i ponownie wykorzystać dla wielu adresów 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
    };
  }
})();

Użyj go w ten sposób:

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

Cóż, obiekt URL API pozwala uniknąć ręcznego dzielenia i tworzenia adresu URL .

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

Jeśli wyodrębniasz informacje z window.location.href (pasek adresu), użyj tego kodu, aby uzyskać http://www.sitename.com/:

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

Jeśli masz ciąg znaków, strczyli dowolny adres URL (nie window.location.href), użyj wyrażeń regularnych:

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

Podobnie jak wszyscy we Wszechświecie nienawidzę czytać wyrażeń regularnych, więc podzielę to na angielski:

• Znajdź zero lub więcej znaków alfabetu, po których następuje dwukropek (protokół, który można pominąć)
• Po którym następuje // (można również pominąć)
• Po którym następują dowolne znaki oprócz / (nazwa hosta i port)
• Śledzony przez /
• Następuje cokolwiek (ścieżka, mniej początek /).

Nie musisz tworzyć elementów DOM ani robić niczego szalonego.

Używam prostego wyrażenia regularnego, które wyodrębnia hosta z adresu URL:

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

i używaj go w ten sposób

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

Uwaga, jeśli urlnie kończy się /na, hostto nie kończy się na /.

Oto kilka testów:

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

Możesz użyć poniższych kodów, aby uzyskać różne parametry bieżącego adresu URL

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

}

Następnie możesz go używać w ten sposób ...

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

Wartość adresu URL będzie wynosić ...

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

„Zmienny adres URL” zawiera również dwie metody.

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

W tym przypadku wartość paramQ będzie wynosić 1.

var allParameters = url.getParameters();

Wartością allParameters będą tylko nazwy parametrów.

["q","t"]

Przetestowano na IE, Chrome i Firefox.

Zamiast brać pod uwagę atrybuty window.location.protocol i window.location.origin i prawdopodobnie brakować określonego numeru portu itp., Po prostu pobierz wszystko do trzeciego „/”:

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

To działa:

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

Możesz to zrobić za pomocą wyrażenia regularnego:

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

czy to pasuje ?

Aby uzyskać pochodzenie dowolnego /my/pathadresu URL, w tym ścieżek w witrynie ( ) lub schemaless ( //example.com/my/path) lub full ( http://example.com/my/path), utworzyłem szybką funkcję.

W poniższym fragmencie wszystkie trzy połączenia powinny zostać zarejestrowane 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'));

To działa dla mnie:

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 podaje aktualny adres url z paska adresu przeglądarki

może to być coś takiego jak https://stackoverflow.com/abc/xyz lub https://www.google.com/search?q=abc tilllastbackslashregex.exec () uruchomić wyrażenie regularne i ponownie dostroić dopasowany ciąg do ostatniego ukośnika odwrotnego, tj. https : //stackoverflow.com/abc/ lub https://www.google.com/ odpowiednio

Dobrym sposobem jest użycie natywnego URLobiektu API JavaScript . Zapewnia to wiele przydatnych części adresu URL.

Na przykład:

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

Jak widać tutaj, możesz uzyskać dostęp do wszystkiego, czego potrzebujesz.

Na przykład: console.log(urlObject.host); // "stackoverflow.com"

doc dla adresu URL