How to Extract Protocol, Domain and Port From URL?

Using JavaScript to Get Protocol

To extract the protocol from a URL in JavaScript, you can use the URL object:

function getProtocol(url) {
  const urlObject = new URL(url);
  return urlObject.protocol;
}

This function creates a URL object from the given URL string and returns the protocol. The protocol includes the colon at the end, like "http:" or "https:".

For a basic approach, you can use string manipulation:

function getProtocolSimple(url) {
  return url.split(':')[0];
}

This method splits the URL at the first colon and takes the first part, which is the protocol.

When handling different protocol types, remember:

• HTTP and HTTPS are common for web URLs.
• Other protocols include FTP, mailto, and file.
• Some URLs might not have a protocol (protocol-relative URLs).

To handle various cases:

function getProtocolSafe(url) {
  if (url.startsWith('//')) {
    return 'https'; // Assume HTTPS for protocol-relative URLs
  }
  const match = url.match(/^([a-z]+):/i);
  return match ? match[1].toLowerCase() : null;
}

This function checks for protocol-relative URLs, uses a regular expression to find the protocol, and returns it in lowercase. If no protocol is found, it returns null.

JavaScript Techniques for Domain Extraction

Using URL object

The URL object in JavaScript helps extract the domain name:

function getDomain(url) {
  const urlObject = new URL(url);
  return urlObject.hostname;
}

This function creates a URL object and returns its hostname property. For example:

const url = 'https://www.example.com:8080/path?query=value';
console.log(getDomain(url)); // Output: www.example.com

This method works with URLs that have subdomains or IP addresses.

Regular expression for domain extraction

For more control or when the URL object isn't available, you can use a regular expression:

function getDomainRegex(url) {
  const match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n?]+)/im);
  return match ? match[1] : null;
}

This regex-based function:

• Works with or without the protocol
• Handles URLs with or without 'www'
• Extracts the domain name up to the first slash, colon, or question mark

Example usage:

const url1 = 'https://subdomain.example.com/path';
const url2 = 'http://www.test-site.co.uk:8080/path';

console.log(getDomainRegex(url1)); // Output: subdomain.example.com
console.log(getDomainRegex(url2)); // Output: test-site.co.uk

Both methods extract domain names from URLs in JavaScript. The URL object method is simple and works for most cases, while the regex approach offers more flexibility for complex URL structures.

Methods to Get Port Information

To extract the port number from a URL, you can use JavaScript's URL object:

function getPort(url) {
  const urlObject = new URL(url);
  return urlObject.port || null;
}

This function returns the port if it's in the URL, or null if it's not.

For URLs without a port, you can get the default port based on the protocol:

function getPortWithDefault(url) {
  const urlObject = new URL(url);
  if (urlObject.port) {
    return urlObject.port;
  }
  switch (urlObject.protocol) {
    case 'http:':
      return '80';
    case 'https:':
      return '443';
    case 'ftp:':
      return '21';
    default:
      return null;
  }
}

This function returns the port if present, or the default port for common protocols.

Default port numbers for common protocols:

• HTTP: 80
• HTTPS: 443
• FTP: 21
• SFTP: 22
• SMTP: 25
• POP3: 110

For URLs with ports, the port is easy to extract:

const url1 = 'https://example.com:8080/path';
console.log(getPort(url1)); // Output: 8080

const url2 = 'http://localhost:3000';
console.log(getPort(url2)); // Output: 3000

When handling URLs without ports:

const url3 = 'https://example.com/path';
console.log(getPortWithDefault(url3)); // Output: 443

const url4 = 'http://example.org';
console.log(getPortWithDefault(url4)); // Output: 80

These methods let you extract port information from URLs, whether the port is stated or implied by the protocol.