编辑: 有些人抱怨它没有考虑到协议。所以我决定升级代码，因为它被标记为答案。对于那些喜欢一行代码的人来说... ... 很抱歉这就是为什么我们使用代码最小化，代码应该是人类可读的，这种方式更好... ... 在我看来。

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

或者从下面使用 大卫解决方案。

不需要使用 jQuery，只需要使用

location.hostname

可以使用正则表达式:

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

合身吗？

没有理由通过分割来从作为链接的字符串中获取路径、主机名等。你只需要用一个链接

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

可以通过 jQuery 添加元素并读取其 attr 轻松实现。

更新: 现在有 new URL()简化了它

const myUrl = new URL("https://www.example.com:3000/article/2009/09/14/this-is-an-article/#m123")


const parts = ['protocol', 'hostname', 'pathname', 'port', 'hash'];


parts.forEach(key => console.log(key, myUrl[key]))

如果你正在使用 jQuery，这是一种很酷的方法来操作 javascript 中的元素，而不需要将它们添加到 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

基于 Webkit 的浏览器、21版的火狐浏览器和当前版本的 Internet Explorer 浏览器(IE10和11)都实现了 location.origin。

location.origin包括 URL 的 规定、 域名和可选的 左舷。

例如，URL http://www.sitename.com/article/2009/09/14/this-is-an-article/的 location.origin是 http://www.sitename.com。

要针对不支持 location.origin的浏览器，使用以下简明的填充方法:

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

如果要从 window.location.href (地址栏)提取信息，那么使用以下代码获取 http://www.sitename.com/:

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

如果您有一个字符串 str，这是一个任意的 URL (不是 window.location.href) ，那么使用正则表达式:

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

像宇宙中的每个人一样，我讨厌阅读正则表达式，所以我将用英语分解它:

• 查找后跟冒号的零个或多个字母字符(可以省略的协议)
• 后面跟着//(也可以省略)
• 后面跟着除/(主机名和端口)之外的任何字符
• 然后是/
• 然后是无论什么(路径，少了开始/)。

不需要创建 DOM 元素或做任何疯狂的事情。

从 URL 的字符串表示形式中获取基本值的一种简单而完整的方法是道格拉斯·克罗克福特的 regexp 规则:

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

如果你正在寻找一个更强大的 URL 操作工具包尝试 URI.js它支持 getter，setter，URL 标准化等所有与一个很好的链接 API。

如果您正在寻找一个 jQuery 插件，那么 Jquery.url.js应该可以帮助您

更简单的方法是使用锚元素，如@epascarello 所建议的。这样做的缺点是必须创建 DOM 元素。然而，这可以缓存在一个闭包中，并重用于多个 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
};
}
})();

像这样使用它:

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

不需要考虑 window.location.protocol 和 window.location.source，也可能丢失指定的端口号，等等，只需要获取第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);
}

这种方法是有效的:

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

var host = location.protocol + '//' + location.host + '/';

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


}

然后你可以像这样使用它..。

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

Url 的值将是..。

{
"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”还包含两个方法。

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

在这种情况下，parmaQ 的值将为1。

var allParameters = url.getParameters();

所有参数的值将只是参数名称。

["q","t"]

在 IE，chrome 和 firefox 上测试。

您可以使用下面的代码来获取当前 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);

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


}

然后:

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

对于你的要求，你需要:

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

回顾07-2017: 它也可以更加优雅，有更多的功能

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

然后

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"

酷！

我使用一个简单的正则表达式从 URL 提取主机:

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

像这样使用它

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

注意，如果 url没有以 /结束，那么 host也不会以 /结束。

以下是一些测试:

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

这对我有用:

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

Href 从浏览器地址栏给出当前的 URL 地址

它可以是任何东西，比如 https://stackoverflow.com/abc/xyz或 https://www.google.com/search?q=abc tilllastbackslashregex.exec ()运行 regex 并返回匹配的字符串，分别返回最后一个反斜杠即 https://stackoverflow.com/abc/或 https://www.google.com/

URL API 对象避免了手动分割和构造 URL。

 let url = new URL('https://stackoverflow.com/questions/1420881');
alert(url.origin);

为了获得任何 URL 的起源，包括网站内的路径(/my/path)或无模式(//example.com/my/path) ，或完整(http://example.com/my/path) ，我整合了一个快速函数。

在下面的代码片段中，所有三个调用都应该记录 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'));

一个好的方法是使用 JavaScript 原生 api URL对象。

例如:

const url = 'https://stackoverflow.com/questions/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: "https://stackoverflow.com/questions/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

正如你在这里看到的，你可以访问任何你需要的。

例如: console.log(urlObject.host); // "stackoverflow.com"

医生呼叫 网址

实施方法:

const getOriginByUrl = url => url.split('/').slice(0, 3).join('/');

测试:

getOriginByUrl('http://www.sitename.com:3030/article/2009/09/14/this-is-an-article?lala=kuku');

结果:

'http://www.sitename.com:3030'