如何从JavaScript中的string提取基准url？

我试图find一个相对容易和可靠的方法来提取使用JavaScript（或jQuery）的stringvariables的基本URL。

例如，给定类似的东西：

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

我想得到：

  http://www.sitename.com/ 

正则expression式是最好的赌注吗？ 如果是这样，我可以使用什么语句将从给定string提取的基本URL分配给新variables？

我已经做了一些search，但是我在JavaScript世界中find的所有东西似乎都是围绕使用location.host或类似的实际文档URL收集这些信息。

Answer 1

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

var pathArray = location.href.split( '/' ); var protocol = pathArray[0]; var host = pathArray[2]; var url = protocol + '//' + host; 

或从下面使用Davids解决scheme 。

Answer 2

基于WebKit的浏览器，Firefox 21以及当前版本的Internet Explorer（IE 10和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浏览器，请使用以下简洁的polyfill：

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

Answer 3

不需要使用jQuery，只需使用

 location.hostname 

Answer 4

没有理由做分裂从一个链接的string得到path，主机名等。 你只需要使用一个链接

 //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附加元素和阅读它的属性。

Answer 5

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

Answer 6

 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：它也可以更优雅，并有更多的function

 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" 

凉！

Answer 7

如果你正在使用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 

Answer 8

道格拉斯·克罗克福德（Douglas Crockford）的正则expression式规则是一种轻而易举的从URL的string表示中获取基本值的完整方法：

 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所说的那样。 这有一个缺点，你必须创build一个DOM元素。 然而，这可以caching在一个封闭的和重复使用多个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'); 

Answer 9

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

Answer 10

我使用一个简单的正则expression式提取主机forms的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将不会以/结尾。

这里有一些testing：

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

Answer 11

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

在这种情况下，paramQ的值将是1。

 var allParameters = url.getParameters(); 

allParameters的值将只是参数名称。

 ["q","t"] 

testing在IE浏览器，铬和Firefox。

Answer 12

如果您从window.location.href（地址栏）提取信息，则使用此代码获取http://www.sitename.com/ ：

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

如果你有一个stringstr ，它是一个任意的URL（不是window.location.href），那么使用正则expression式：

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

我和宇宙中的每个人一样，讨厌阅读正则expression式，所以我会用英文来分解它：

• 查找零个或多个字母字符，后跟一个冒号（协议，可以省略）
• 紧接着//（也可以省略）
• 除/（主机名和端口）外，
• 其次是 /
• 接下来是什么（path，less开始/）。

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

Answer 13

而不是必须考虑window.location.protocol和window.location.origin，并可能丢失指定的端口号等，只需抓住一切，直到第三个“/”：

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

Answer 14

你可以使用正则expression式来做到这一点：

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

合身吗 ？

Answer 15

这工作：

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

Answer 16

这对我有用：

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