Extract hostname name from string

Question

I would like to match just the root of a URL and not the whole URL from a text string. Given:

http://www.youtube.co         


        

Answer 1

2020 answer

You don't need any extra dependencies for this! Depending on whether you need to optimize for performance or not, there are two good solutions:

1. Use URL.hostname for readability

In the Babel era, the cleanest and easiest solution is to use URL.hostname.

const getHostname = (url) => {
  // use URL constructor and return hostname
  return new URL(url).hostname;
}

// tests
console.log(getHostname("https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string/"));
console.log(getHostname("https://developer.mozilla.org/en-US/docs/Web/API/URL/hostname"));

URL.hostname is part of the URL API, supported by all major browsers except IE (caniuse). Use a URL polyfill if you need to support legacy browsers.

Using this solution will also give you access to other URL properties and methods. This will be useful if you also want to extract the URL's pathname or query string params, for example.

---

2. Use RegEx for performance

URL.hostname is faster than using the anchor solution or parseUri. However it's still much slower than gilly3's regex:

const getHostnameFromRegex = (url) => {
  // run against regex
  const matches = url.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
  // extract hostname (will be null if no match is found)
  return matches && matches[1];
}

// tests
console.log(getHostnameFromRegex("https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string/"));
console.log(getHostnameFromRegex("https://developer.mozilla.org/en-US/docs/Web/API/URL/hostname"));

Test it yourself on this jsPerf

---

TL;DR

If you need to process a very large number of URLs (where performance would be a factor), use RegEx. Otherwise, use URL.hostname.