如何从JavaScript中的字符串中提取基本URL？

然后 :

'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

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"

凉!

如果你正在使用jQuery,这是一种很好的方式来操作javascript中的元素而不将它们添加到DOM:

从URL的字符串表示中获取基本值的轻便而完整的方法是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]+'/' ;

如果您正在寻找更强大的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');

好的，URL API对象避免了手动拆分和构造url的情况。

 let url = new URL('/sf/ask/17360801/');
 alert(url.origin);

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

如果要从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元素或进行任何疯狂的操作。