Get protocol, domain, and port from URL

Question

I need to extract the full protocol, domain, and port from a given URL. For example:

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

Kirill Kulakov · Accepted Answer · 2021-07-09 23:31:20Z

726

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

edited Jul 9, 2021 at 23:31

Kirill Kulakov

10.2k9 gold badges51 silver badges69 bronze badges

answered Aug 4, 2011 at 12:45

Shef

45.3k15 gold badges81 silver badges90 bronze badges

3

@Randomblue What about it? You will get about://. However, I am curious to know, what would be the use case for about:blank? I am not sure if any browser injects plugin resources in about:blank, but seems like that could be the only use case.
– Shef
Commented Sep 2, 2012 at 6:27
3

This doesn't work at all if you have a URL string, right? (i.e. you need to be at location for this to work)
– Nick T
Commented Oct 5, 2015 at 22:57
1

Sorry for the late reply, @NickT. Yes, it does't do that. Please, use the nice solution provided by David for that.
– Shef
Commented Oct 7, 2015 at 16:37
27

Can't you use location.host instead of location.hostname + location.port?
– c24w
Commented Sep 20, 2016 at 14:28
1

Upvoting for hinting that location.protocol contains the colon.
– Anders Lindén
Commented Aug 30, 2019 at 11:25

| Show 4 more comments

David Calhoun · Accepted Answer · 2020-06-01 20:38:08Z

None of these answers seem to completely address the question, which calls for an arbitrary url, not specifically the url of the current page.

Method 1: Use the URL API (caveat: no IE11 support)

You can use the URL API (not supported by IE11, but available everywhere else).

This also makes it easy to access search params. Another bonus: it can be used in a Web Worker since it doesn't depend on the DOM.

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

Method 2 (old way): Use the browser's built-in parser in the DOM

Use this if you need this to work on older browsers as well.

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

That's it!

The browser's built-in parser has already done its job. Now you can just grab the parts you need (note that this works for both methods 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:'

Bonus: Search params

Chances are you'll probably want to break apart the search url params as well, since '?startIndex=1&pageSize=10' isn't too useable on its own.

If you used Method 1 (URL API) above, you simply use the searchParams getters:

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

Or to get all parameters:

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

If you used Method 2 (the old way), you can use something like this:

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

link.protocol gets me a "http:" if i inspect a anker with "google.com" :-( var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol) — eXe, Commented Sep 26, 2016 at 12:35
Are you doing that on a http page perhaps? If not specified it will 'inherit' from the current location — Stijn de Witt, Commented Nov 14, 2016 at 21:24
Thank you for this clever trick! I would like to add one thing: There is both host and hostname. The former includes the port (e.g. localhost:3000), while the latter is only the host's name (e.g. localhost). — codener, Commented Mar 31, 2017 at 11:30
This works well in case of absolute URL. It fails in case of Relative URL and cross-browser. Any suggestions? — Gururaj, Commented Aug 4, 2017 at 12:42
search = search.split('?')[1]; really?!?! How about search = search.substr(1); instead? Much safer and faster since it creates 1 string instead of 2... — Alexis Wilke, Commented Sep 5, 2017 at 3:19

Pijusn · Accepted Answer · 2013-05-30 18:35:49Z

215

For some reason all the answers are all overkills. This is all it takes:

window.location.origin

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

answered May 30, 2013 at 18:35

Pijusn

11.2k7 gold badges61 silver badges76 bronze badges

3

Just to complete: location is defined on HTML5 and it implements the URLUtils interface which is defined on WHATWG and includes the origin attribute.
– Ciro Santilli OurBigBook.com
Commented Nov 10, 2014 at 9:00

Add a comment |

starball · Accepted Answer · 2022-12-23 08:55:03Z

194

first get the current address

var url = window.location.href

Then just parse that string

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

your url is:

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

edited Dec 23, 2022 at 8:55

starball

40.5k20 gold badges127 silver badges678 bronze badges

answered Aug 4, 2011 at 12:43

wezzy

5,9253 gold badges32 silver badges42 bronze badges

10

This works with URL string where location object is not available(js outside browser!)
– Thamme Gowda
Commented Nov 26, 2014 at 6:03
12

Or just turn it into a one-liner: window.location.href.split('/').slice(0, 3).join('/')
– Ryan McGeary
Commented May 16, 2017 at 19:35
and how you'd do this on node?
– Playdome.io
Commented May 22, 2017 at 10:49
It looks like location.protocol is supported since may 2013. When this answer was made it made sense, for now you could use location.protocol.
– A1rPun
Commented Sep 16, 2019 at 14:41

Add a comment |

Jeffrey Knight · Accepted Answer · 2015-09-09 11:14:07Z

55

As has already been mentioned there is the as yet not fully supported window.location.origin but instead of either using it or creating a new variable to use, I prefer to check for it and if it isn't set to set it.

For example;

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

I actually wrote about this a few months back A fix for window.location.origin

edited Sep 9, 2015 at 11:14

Jeffrey Knight

5,9397 gold badges40 silver badges49 bronze badges

answered Oct 10, 2013 at 0:26

Toby

8,74213 gold badges46 silver badges69 bronze badges

Add a comment |

Miroslav Holec · Accepted Answer · 2015-07-19 07:42:14Z

37

host

var url = window.location.host;

returns localhost:2679

hostname

var url = window.location.hostname;

returns localhost

answered Jul 19, 2015 at 7:42

Miroslav Holec

3,19926 silver badges23 bronze badges

Add a comment |

Maik de Kruif · Accepted Answer · 2019-08-07 21:02:30Z

27

Why not use:

let full = window.location.origin

answered Aug 7, 2019 at 21:02

Maik de Kruif

4476 silver badges9 bronze badges

4

When adding an answer to an older question with existing answers it is useful to explain what new information your answer brings, and to acknowledge if the passage of time impacts the answer.
– Jason Aller
Commented Aug 7, 2019 at 23:13
This just repeats the same solution (window.location.origin) as several answers including this one from 2013 stackoverflow.com/a/16843537 (the only difference is it assigns the value to a variable, which is irrelevant to the question being asked). It should be deleted, but requires a moderator due to the high score.
– TylerH
Commented Mar 24, 2023 at 16:09

Add a comment |

probablyup · Accepted Answer · 2018-11-30 19:59:54Z

26

window.location.origin will be enough to get the same.

edited Nov 30, 2018 at 19:59

probablyup

7,9641 gold badge28 silver badges40 bronze badges

answered Nov 30, 2018 at 19:04

int soumen

5315 silver badges14 bronze badges

This just repeats the same solution (window.location.origin) as several answers including this one from 2013 stackoverflow.com/a/16843537 -- It should be deleted, but requires a moderator due to the high score.
– TylerH
Commented Mar 24, 2023 at 16:09

Add a comment |

Дамян Станчев · Accepted Answer · 2017-08-28 10:23:08Z

The protocol property sets or returns the protocol of the current URL, including the colon (:).

This means that if you want to get only the HTTP/HTTPS part you can do something like this:

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

For the domain you can use:

var domain = window.location.hostname;

For the port you can use:

var port = window.location.port;

Keep in mind that the port will be an empty string if it is not visible in the URL. For example:

http://example.com/ will return "" for port
http://example.com:80/ will return 80 for port

If you need to show 80/443 when you have no port use

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

cpu · Accepted Answer · 2013-06-28 16:27:58Z

Indeed, window.location.origin works fine in browsers following standards, but guess what. IE isn't following standards.

So because of that, this is what worked for me in IE, FireFox and Chrome:

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

but for possible future enhancements which could cause conflicts, I specified the "window" reference before the "location" object.

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

JulienRioux · Accepted Answer · 2019-07-08 20:22:02Z

8

Here is the solution I'm using:

const result = `${ window.location.protocol }//${ window.location.host }`;

EDIT:

To add cross-browser compatibility, use the following:

const result = `${ window.location.protocol }//${ window.location.hostname + (window.location.port ? ':' + window.location.port: '') }`;

edited Jul 8, 2019 at 20:22

answered Apr 28, 2019 at 19:55

JulienRioux

3,0232 gold badges26 silver badges40 bronze badges

Add a comment |

Craigo · Accepted Answer · 2021-04-08 06:05:55Z

4

With ES6 template literals:

const url = `${location.protocol}//${location.hostname}${location.port?':'+location.port:''}`;

document.getElementById("result").innerText = url;

<div id="result"></div>

And you can simplify to:

const url = `${location.protocol}//${location.host}`;

document.getElementById("result").innerText = url;

<div id="result"></div>

edited Apr 8, 2021 at 6:05

answered Aug 4, 2020 at 4:20

Craigo

3,57932 silver badges23 bronze badges

Add a comment |

Elankeeran · Accepted Answer · 2013-07-02 10:05:49Z

3

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

answered Jul 2, 2013 at 10:05

Elankeeran

6,1749 gold badges41 silver badges57 bronze badges

Add a comment |

haipeng · Accepted Answer · 2016-09-09 07:14:30Z

3

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

answered Sep 9, 2016 at 7:14

haipeng

314 bronze badges

2

consider explaining your answer. Don't assume the OP can understand the significance of the different parts of your code.
– ADyson
Commented Sep 9, 2016 at 10:00

Add a comment |

ed9w2in6 · Accepted Answer · 2017-06-02 01:06:52Z

3

Try use a regular expression (Regex), which will be quite useful when you want to validate / extract stuff or even do some simple parsing in javascript.

The regex is :

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

Demonstration:

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]

Now you can do validation as well.

edited Jun 2, 2017 at 1:06

answered Jun 2, 2017 at 1:00

ed9w2in6

1338 bronze badges

"A valid RFC 3986 URL scheme must consist of "a letter and followed by any combination of letters, digits, plus ("+"), period ("."), or hyphen ("-")." -- stackoverflow.com/a/9142331/188833 (Here's an urn:ietf:rfc:3897 (URI) / urn:ietf:rfc:3897 (IRI) regex for the scheme: part of a URI/IRI in Python: github.com/dgerber/rfc3987/blob/master/rfc3987.py#L147 )
– Wes Turner
Commented Jun 13, 2018 at 15:45

Add a comment |

Mike Hawes · Accepted Answer · 2019-04-11 02:58:27Z

2

Simple answer that works for all browsers:

let origin;

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

origin = window.location.origin;

answered Apr 11, 2019 at 2:58

Mike Hawes

5555 silver badges8 bronze badges

Add a comment |

Sébastien · Accepted Answer · 2018-08-20 09:10:20Z

ES6 style with configurable parameters.

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

Code_Worm · Accepted Answer · 2018-09-09 13:22:18Z

1

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

answered Sep 9, 2018 at 13:22

Code_Worm

4,3603 gold badges31 silver badges37 bronze badges

Add a comment |

double-beep · Accepted Answer · 2021-09-13 08:27:10Z

-1

console.log(`${req.protocol}://${req.get('host')}/${req.originalUrl}`);

req.protocol - gives the protocol you used (e.g. HTTP)
req.get(host) - gives the host name with the port number (e.g. localhost:8080)

edited Sep 13, 2021 at 8:27

double-beep

5,34519 gold badges37 silver badges45 bronze badges

answered Sep 13, 2021 at 1:49

Prabhat Roy

252 bronze badges

1

But what is req?, the question doesn't have an Express framework tag, for example you might need for an application via CLI to parse URLs.
– e-info128
Commented Mar 29, 2022 at 18:36

Add a comment |

Collectives™ on Stack Overflow

Get protocol, domain, and port from URL

19 Answers 19

Method 1: Use the URL API (caveat: no IE11 support)

Method 2 (old way): Use the browser's built-in parser in the DOM

That's it!

Bonus: Search params

ES6 style with configurable parameters.

Not the answer you're looking for? Browse other questions tagged
javascript
url
dns
protocols
port
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

19 Answers 19

Method 1: Use the URL API (caveat: no IE11 support)

Method 2 (old way): Use the browser's built-in parser in the DOM

That's it!

Bonus: Search params

ES6 style with configurable parameters.

Not the answer you're looking for? Browse other questions tagged javascripturldnsprotocolsport or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
url
dns
protocols
port
or ask your own question.