From the URL, get the protocol, domain, and port.

Problem

From a given URL, I need to extract the whole protocol, domain, and port. Consider the following scenario:

https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181

Asked by yelo3

Solution #1

const full = location.protocol + '//' + location.host;

Answered by Shef

Solution #2

None of these responses appear to really satisfy the question, which requires an arbitrary url rather than the current page’s url.

The URL API can be used (not supported by IE11, but available everywhere else).

This makes it simple to access search parameters. It can also be utilized in a Web Worker because it is not dependent on the DOM.

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

If you need it to work on previous browsers as well, this is the way to go.

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

The built-in parser in your browser has already completed its task. Now you can just grab the bits you require (this applies to both approaches above):

//  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:'

Because ‘?startIndex=1&pageSize=10’ isn’t very useful on its own, you’ll probably want to break up the search url params as well.

You can just use the searchParams getters if you used Method 1 (URL API) above:

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

Alternatively, to obtain all parameters, type:

function searchParamsToObj(searchParams) {
  const paramsMap = Array
    .from(url.searchParams)
    .reduce((params, [key, val]) => params.set(key, val), new Map());
  return Object.fromEntries(paramsMap);
}
searchParamsToObj(url.searchParams);
// -> { startIndex: '1', pageSize: '10' }

You can use something like this if you utilized Method 2 (the old way):

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

Answered by David Calhoun

Solution #3

Get the current address first.

var url = window.location.href

Then simply parse the string.

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

your url is:

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

Hope this helps

Answered by wezzy

Solution #4

For whatever reason, all of the responses are excessive. It’s as simple as that:

window.location.origin

More details can be found here: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

Answered by Pijusn

Solution #5

As previously said, window.location.origin is still not completely supported, but rather than utilizing it or creating a new variable to use, I prefer to check for it and set it if it isn’t set.

For example;

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

This is something I wrote about a few months ago. window.location.origi has been fixed.

Answered by Toby

Post is based on https://stackoverflow.com/questions/6941533/get-protocol-domain-and-port-from-url