Saya mencoba menemukan metode yang relatif mudah dan andal untuk mengekstraksi URL dasar dari variabel string menggunakan JavaScript (atau jQuery).

Misalnya, diberikan sesuatu seperti:

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

Saya ingin mendapatkan:

http://www.sitename.com/

Apakah ekspresi reguler adalah taruhan terbaik? Jika demikian, pernyataan apa yang dapat saya gunakan untuk menetapkan URL dasar yang diekstraksi dari string yang diberikan ke variabel baru?

Saya sudah melakukan pencarian ini, tetapi semua yang saya temukan di dunia JavaScript tampaknya berputar mengumpulkan informasi ini dari URL dokumen aktual menggunakan location.host atau yang serupa.

Sunting: Beberapa mengeluh bahwa itu tidak mempertimbangkan protokol akun. Jadi saya memutuskan untuk memutakhirkan kode, karena ditandai sebagai jawaban. Bagi mereka yang suka kode satu baris ... maaf ini sebabnya kami menggunakan kode minimator, kode harus dapat dibaca manusia dan cara ini lebih baik ... menurut saya.

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

Atau gunakan solusi Davids dari bawah.

Browser berbasis WebKit, Firefox pada versi 21 dan versi Internet Explorer saat ini (IE 10 dan 11) menerapkan location.origin.

location.origintermasuk protokol , domain, dan opsional port URL.

Misalnya, location.origindari URL http://www.sitename.com/article/2009/09/14/this-is-an-article/tersebut http://www.sitename.com.

Untuk menargetkan browser tanpa dukungan untuk location.originmenggunakan polyfill ringkas berikut:

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

Tidak perlu menggunakan jQuery, cukup gunakan

location.hostname

Tidak ada alasan untuk melakukan splits untuk mendapatkan path, nama host, dll dari string yang merupakan tautan. Anda hanya perlu menggunakan tautan

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

Anda dapat dengan mudah melakukannya dengan menambahkan elemen jQuery dan membaca attrnya.

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

}

Kemudian :

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

Untuk permintaan Anda, Anda perlu:

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

Ulasan 07-2017: Itu bisa juga lebih elegan & memiliki lebih banyak fitur

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

Kemudian

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"

Keren!

Jika Anda menggunakan jQuery, ini adalah cara yang agak keren untuk memanipulasi elemen dalam javascript tanpa menambahkannya ke 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

Pendekatan yang ringan tapi lengkap untuk mendapatkan nilai-nilai dasar dari representasi string dari sebuah URL adalah aturan regexp Douglas Crockford:

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

Jika Anda mencari toolkit manipulasi URL yang lebih kuat, cobalah URI.js. Ini mendukung getter, setter, normalisasi url, dll.

Jika Anda mencari Plugin jQuery, maka jquery.url.js akan membantu Anda

Cara yang lebih sederhana untuk melakukannya adalah dengan menggunakan elemen jangkar, seperti yang disarankan @epascarello. Ini memiliki kekurangan bahwa Anda harus membuat Elemen DOM. Namun ini bisa di-cache dalam penutupan dan digunakan kembali untuk banyak 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
    };
  }
})();

Gunakan seperti ini:

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

Yah, objek URL API menghindari pemisahan dan pembuatan url secara manual.

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

Jika Anda mengekstraksi informasi dari window.location.href (bilah alamat), gunakan kode ini untuk mendapatkan http://www.sitename.com/:

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

Jika Anda memiliki string,, stryaitu URL yang arbitrer (bukan window.location.href), maka gunakan ekspresi reguler:

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

Saya, seperti semua orang di Semesta, benci membaca ekspresi reguler, jadi saya akan memecahnya dalam bahasa Inggris:

• Temukan nol atau lebih karakter alfa diikuti oleh titik dua (protokol, yang dapat dihilangkan)
• Diikuti oleh // (bisa juga dihilangkan)
• Diikuti oleh karakter apa pun kecuali / (nama host dan port)
• Diikuti oleh /
• Diikuti oleh apa pun (jalan, kurang awal /).

Tidak perlu membuat elemen DOM atau melakukan sesuatu yang gila.

Saya menggunakan regex sederhana yang mengekstrak host dari url:

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

dan gunakan seperti ini

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

Catatan, jika urltidak berakhir dengan /yang hosttidak akan berakhir dalam /.

Berikut ini beberapa tes:

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

Anda dapat menggunakan kode di bawah ini untuk mendapatkan berbagai parameter URL Saat Ini

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

}

Anda kemudian dapat menggunakannya seperti ini ...

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

Nilai url akan menjadi ...

{
"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" juga mengandung dua metode.

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

Dalam hal ini nilai paramQ akan menjadi 1.

var allParameters = url.getParameters();

Nilai allParameters akan menjadi nama parameter saja.

["q","t"]

Diuji pada IE, chrome dan firefox.

Daripada harus memperhitungkan window.location.protocol dan window.location.origin, dan mungkin kehilangan nomor port yang ditentukan, dll., Ambil semuanya hingga ke "/" ke-3:

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

Ini bekerja:

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

Anda dapat melakukannya menggunakan regex:

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

apakah itu cocok?

Untuk mendapatkan asal usul url apa pun, termasuk jalur di dalam situs web ( /my/path) atau schemaless ( //example.com/my/path), atau full ( http://example.com/my/path) saya menyusun fungsi cepat.

Dalam cuplikan di bawah ini, ketiga panggilan harus dicatat 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'));

Ini bekerja untuk saya:

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 memberikan alamat url saat ini dari bilah alamat browser

itu bisa apa saja seperti https://stackoverflow.com/abc/xyz atau https://www.google.com/search?q=abc tilllastbackslashregex.exec () jalankan regex dan retun string yang cocok sampai backslash terakhir yaitu https : //stackoverflow.com/abc/ atau https://www.google.com/ masing-masing

Cara yang baik adalah dengan menggunakan URLobjek api asli JavaScript . Ini memberikan banyak bagian url yang bermanfaat.

Sebagai contoh:

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

Seperti yang Anda lihat di sini, Anda hanya dapat mengakses apa pun yang Anda butuhkan.

Sebagai contoh: console.log(urlObject.host); // "stackoverflow.com"

doc untuk URL