Tôi đang cố gắng tìm một phương pháp tương đối dễ dàng và đáng tin cậy để trích xuất URL cơ sở từ biến chuỗi bằng JavaScript (hoặc jQuery).

Ví dụ: đưa ra một cái gì đó như:

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

Tôi muốn nhận được:

http://www.sitename.com/

Là một biểu thức thường xuyên là đặt cược tốt nhất? Nếu vậy, tôi có thể sử dụng câu lệnh nào để gán URL cơ sở được trích xuất từ ​​một chuỗi nhất định cho một biến mới?

Tôi đã thực hiện một số tìm kiếm về điều này, nhưng mọi thứ tôi tìm thấy trong thế giới JavaScript dường như xoay quanh việc thu thập thông tin này từ URL tài liệu thực tế bằng location.host hoặc tương tự.

Chỉnh sửa: Một số phàn nàn rằng nó không đưa vào giao thức tài khoản. Vì vậy, tôi quyết định nâng cấp mã, vì nó được đánh dấu là câu trả lời. Đối với những người thích mã một dòng ... xin lỗi, tại sao chúng tôi sử dụng bộ giảm thiểu mã, mã phải dễ đọc với con người và cách này tốt hơn ... theo ý kiến ​​của tôi.

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

Hoặc sử dụng giải pháp Davids từ bên dưới.

Các trình duyệt dựa trên WebKit, Firefox kể từ phiên bản 21 và các phiên bản hiện tại của Internet Explorer (IE 10 và 11) thực hiện location.origin.

location.originbao gồm giao thức , tên miền và tùy chọn cổng URL.

Ví dụ: location.origincủa URL http://www.sitename.com/article/2009/09/14/this-is-an-article/là http://www.sitename.com.

Để nhắm mục tiêu các trình duyệt mà không cần hỗ trợ để location.originsử dụng polyfill ngắn gọn sau đây:

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

Không cần sử dụng jQuery, chỉ cần sử dụng

location.hostname

Không có lý do để thực hiện chia tách để có được đường dẫn, tên máy chủ, vv từ một chuỗi là một liên kết. Bạn chỉ cần sử dụng một liên kết

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

Bạn có thể dễ dàng làm điều đó với jQuery nối thêm phần tử và đọc attr của nó.

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

}

Sau đó :

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

Đối với yêu cầu của bạn, bạn cần:

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

Đánh giá 07-2017: Nó cũng có thể thanh lịch hơn và có nhiều tính năng hơn

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

Sau đó

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"

Mát mẻ!

Nếu bạn đang sử dụng jQuery, đây là một cách hay để thao tác các phần tử trong javascript mà không cần thêm chúng vào 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

Một cách tiếp cận nhẹ nhàng nhưng đầy đủ để có được các giá trị cơ bản từ một chuỗi đại diện của URL là quy tắc regrec của 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]+'/' ;

Nếu bạn đang tìm kiếm một bộ công cụ thao tác URL mạnh hơn, hãy thử URI.js Nó hỗ trợ getters, setter, url chuẩn hóa, v.v. tất cả đều có một api chuỗi đẹp.

Nếu bạn đang tìm kiếm một Plugin jQuery, thì jquery.url.js sẽ giúp bạn

Một cách đơn giản hơn để làm điều đó là sử dụng phần tử neo, như @eprebello đề xuất. Điều này có nhược điểm là bạn phải tạo Phần tử DOM. Tuy nhiên, điều này có thể được lưu trong bộ nhớ cache và được sử dụng lại cho nhiều 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
    };
  }
})();

Sử dụng nó như vậy:

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

Chà, đối tượng API URL tránh chia tách và xây dựng url theo cách thủ công.

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

Nếu bạn đang trích xuất thông tin từ window.location.href (thanh địa chỉ), thì hãy sử dụng mã này để nhận http://www.sitename.com/:

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

Nếu bạn có một chuỗi, strđó là một URL tùy ý (không phải window.location.href), thì hãy sử dụng các biểu thức thông thường:

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

Tôi, giống như mọi người trong vũ trụ, ghét đọc các biểu thức thông thường, vì vậy tôi sẽ chia nhỏ nó bằng tiếng Anh:

• Tìm không hoặc nhiều ký tự alpha theo sau bởi dấu hai chấm (giao thức, có thể bỏ qua)
• Tiếp theo là // (cũng có thể được bỏ qua)
• Theo sau bởi bất kỳ ký tự nào ngoại trừ / (tên máy chủ và cổng)
• Theo dõi bởi /
• Tiếp theo là bất cứ điều gì (đường dẫn, ít bắt đầu /).

Không cần phải tạo các phần tử DOM hoặc làm bất cứ điều gì điên rồ.

Tôi sử dụng một biểu thức chính đơn giản để trích xuất mẫu máy chủ url:

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

và sử dụng nó như thế này

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

Lưu ý, nếu urlkhông kết thúc bằng /thì hostsẽ không kết thúc bằng a /.

Dưới đây là một số bài kiểm tra:

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

Bạn có thể sử dụng các mã dưới đây để nhận các thông số khác nhau của URL hiện tại

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

}

Sau đó bạn có thể sử dụng nó như thế này ...

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

Giá trị của url sẽ là ...

{
"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" cũng chứa hai phương thức.

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

Trong trường hợp này, giá trị của paramQ sẽ là 1.

var allParameters = url.getParameters();

Giá trị của allParameter sẽ chỉ là tên tham số.

["q","t"]

Đã thử nghiệm trên IE, chrome và firefox.

Thay vì phải tính đến window.location.protatio và window.location.origin và có thể thiếu một số cổng được chỉ định, v.v., chỉ cần lấy mọi thứ lên đến thứ 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);
}

Những công việc này:

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

Bạn có thể làm điều đó bằng cách sử dụng biểu thức chính quy:

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

Nó có vừa không ?

Để có được nguồn gốc của bất kỳ url nào, bao gồm các đường dẫn trong một trang web ( /my/path) hoặc schemaless ( //example.com/my/path) hoặc full ( http://example.com/my/path) tôi kết hợp một hàm nhanh chóng.

Trong đoạn trích dưới đây, cả ba cuộc gọi sẽ đăng nhập 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'));

Điều này, làm việc cho tôi:

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 cung cấp địa chỉ url hiện tại từ thanh địa chỉ trình duyệt

nó có thể là bất cứ điều gì như https://stackoverflow.com/abc/xyz hoặc https://www.google.com/search?q=abc tilllastbackslashregex.exec () chạy regex và retun chuỗi phù hợp cho đến khi dấu chéo ngược cuối cùng tức là https : //stackoverflow.com/abc/ hoặc https://www.google.com/ tương ứng

Một cách tốt là sử dụng URLđối tượng api gốc JavaScript . Điều này cung cấp nhiều phần url hữu ích.

Ví dụ:

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

Như bạn thấy ở đây bạn chỉ có thể truy cập bất cứ thứ gì bạn cần.

Ví dụ: console.log(urlObject.host); // "stackoverflow.com"

tài liệu cho URL