从URL获取协议，域和端口

14 回答

• 1

  window.location.protocol'//'window.location.host

  回复于 2024-04-20T21:19:42+08:00
• 0

  这些答案似乎都没有完全解决这个问题，这个问题需要一个任意的URL，而不是当前页面的url .

  方法1：使用URL API（警告：没有IE11支持）

  您可以使用URL API（IE11不支持，但可用everywhere else） .

  这也使得访问search params变得容易 . 另一个好处是：它可以在Web Worker中使用，因为它不依赖于DOM .

  const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');
  

  方法2（旧方法）：在DOM中使用浏览器的内置解析器

  如果您需要这个也可以在旧浏览器上使用，请使用此选项 .

  //  Create an anchor element (note: no need to append this element to the document)
  const url = document.createElement('a');
  //  Set href to any path
  url.setAttribute('href', 'http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');
  

  就是这样！

  浏览器的内置解析器已经完成了它的工作 . 现在您可以 grab 所需的部件（请注意，这适用于上述两种方法）：

  //  Get any piece of the url you're interested in
  url.hostname;  //  'example.com'
  url.port;      //  12345
  url.search;    //  '?startIndex=1&pageSize=10'
  url.pathname;  //  '/blog/foo/bar'
  url.protocol;  //  'http:'
  

  奖励：搜索参数

  有可能你也可能想要拆分搜索网址参数，因为'？startIndex = 1＆pageSize = 10'本身并不太可用 .

  如果您使用上面的方法1（URL API），则只需使用searchParams getters：

  url.searchParams.get('searchIndex');  // '1'
  

  或者获取所有参数：

  Array.from(url.searchParams).reduce((accum, [key, val]) => {
    accum[key] = val;
    return accum;
  }, {});
  // -> { startIndex: '1', pageSize: '10' }
  

  如果您使用方法2（旧方法），您可以使用以下内容：

  // Simple object output (note: does NOT preserve duplicate keys).
  var params = url.search.substr(1); // remove '?' prefix
  params.split('&').reduce((accum, keyval) => {
    const [key, val] = keyval.split('=');
    accum[key] = val;
    return accum;
  }, {});
  // -> { startIndex: '1', pageSize: '10' }
  

  回复于 2024-04-20T21:19:42+08:00
• 142

  出于某种原因，所有答案都是过度杀伤力 . 这就是所需要的：

  window.location.origin
  

  更多细节可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

  回复于 2024-04-20T21:19:42+08:00
• 6

  protocol属性设置或返回当前URL的协议，包括冒号（:) .

  这意味着如果您只想获得HTTP / HTTPS部分，可以执行以下操作：

  var protocol = window.location.protocol.replace(/:/g,'')
  

  对于您可以使用的域：

  var domain = window.location.hostname;
  

  对于您可以使用的端口：

  var port = window.location.port;
  

  请记住，如果端口在URL中不可见，则该端口将为空字符串 . 例如：

  • http://example.com/将为端口返回“”

  • http://example.com:80/将为端口返回80

  如果您在没有端口使用时需要显示80/443

  var port = window.location.port || (protocol === 'https' ? '443' : '80');
  

  回复于 2024-04-20T21:19:42+08:00
• 0

  var http = location.protocol;
  var slashes = http.concat("//");
  var host = slashes.concat(window.location.hostname);
  

  回复于 2024-04-20T21:19:42+08:00
• 2

  var getBasePath = function(url) {
      var r = ('' + url).match(/^(https?:)?\/\/[^/]+/i);
      return r ? r[0] : '';
  };
  

  回复于 2024-04-20T21:19:42+08:00
• 2

  实际上，window.location.origin在遵循标准的浏览器中运行良好，但猜猜是什么 . IE不符合标准 .

  因此，这在IE，FireFox和Chrome中对我有用：

  var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
  

  但是对于可能导致冲突的未来可能的增强，我在“location”对象之前指定了“window”引用 .

  var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':'+window.location.port: '');
  

  回复于 2024-04-20T21:19:42+08:00
• 108

  尝试使用正则表达式（Regex），当您想要验证/提取内容甚至在javascript中进行一些简单的解析时，这将非常有用 .

  正则表达式是：

  /([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/
  

  示范：

  function breakURL(url){
  
       matches = /([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/.exec(url);
  
       foo = new Array();
  
       if(matches){
            for( i = 1; i < matches.length ; i++){ foo.push(matches[i]); }
       }
  
       return foo
  }
  
  url = "https://www.google.co.uk:55699/search?q=http%3A%2F%2F&oq=http%3A%2F%2F&aqs=chrome..69i57j69i60l3j69i65l2.2342j0j4&sourceid=chrome&ie=UTF-8"
  
  
  breakURL(url);       // [https, www.google.co.uk, 55699] 
  breakURL();          // []
  breakURL("asf");     // []
  breakURL("asd://");  // []
  breakURL("asd://a"); // [asd, a, undefined]
  

  现在您也可以进行验证 .

  回复于 2024-04-20T21:19:42+08:00
• 487

  首先获取当前地址

  var url = window.location.href
  

  然后只解析该字符串

  var arr = url.split("/");
  

  你的网址是：

  var result = arr[0] + "//" + arr[2]
  

  希望这可以帮助

  回复于 2024-04-20T21:19:42+08:00
• 2

  host

  var url = window.location.host;
  

  返回 localhost:2679

  hostname

  var url = window.location.hostname;
  

  返回 localhost

  回复于 2024-04-20T21:19:42+08:00
• 28

  window.location.origin 就足够了 .

  回复于 2024-04-20T21:19:42+08:00
• 11

  正如已经提到的那样，尚未完全支持 window.location.origin 但是不是使用它或创建一个新变量来使用，我更喜欢检查它，如果没有设置它 .

  例如;

  if (!window.location.origin) {
    window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
  }
  

  几个月前我真的写了这篇文章A fix for window.location.origin

  回复于 2024-04-20T21:19:42+08:00
• 48

  var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
  

  回复于 2024-04-20T21:19:42+08:00
• 119

  ES6样式，带有可配置参数 .

  /**
   * Get the current URL from `window` context object.
   * Will return the fully qualified URL if neccessary:
   *   getCurrentBaseURL(true, false) // `http://localhost/` - `https://localhost:3000/`
   *   getCurrentBaseURL(true, true) // `http://www.example.com` - `https://www.example.com:8080`
   *   getCurrentBaseURL(false, true) // `www.example.com` - `localhost:3000`
   *
   * @param {boolean} [includeProtocol=true]
   * @param {boolean} [removeTrailingSlash=false]
   * @returns {string} The current base URL.
   */
  export const getCurrentBaseURL = (includeProtocol = true, removeTrailingSlash = false) => {
    if (!window || !window.location || !window.location.hostname || !window.location.protocol) {
      console.error(
        `The getCurrentBaseURL function must be called from a context in which window object exists. Yet, window is ${window}`,
        [window, window.location, window.location.hostname, window.location.protocol],
      )
      throw new TypeError('Whole or part of window is not defined.')
    }
  
    const URL = `${includeProtocol ? `${window.location.protocol}//` : ''}${window.location.hostname}${
      window.location.port ? `:${window.location.port}` : ''
    }${removeTrailingSlash ? '' : '/'}`
  
    // console.log(`The URL is ${URL}`)
  
    return URL
  }
  

  回复于 2024-04-20T21:19:42+08:00