Skip to main content

How to Remove 'http://' or 'https://' from a URL in JavaScript

A common requirement in web development is to strip the protocol (http:// or https://) from a URL string. This is useful for displaying a cleaner, "protocol-relative" URL (e.g., example.com/path) or for standardizing URLs before processing them.

This guide will teach you the two best methods for this task. We'll cover the most direct approach for pure string manipulation using replace() with a regular expression, and the most robust method for parsing actual URLs using the built-in URL object.

For a quick and direct string manipulation, the String.prototype.replace() method with a simple regular expression is the most efficient solution. It finds and removes the protocol from the beginning of the string.

Problem: you have a URL string and want to remove the http:// or https:// prefix.

// Problem: How to strip the protocol from these strings?
let url1 = 'https://www.example.com/path';
let url2 = 'http://example.com';

Solution:

function removeProtocol(url) {
  // The regex /^https?:\/\// matches http:// or https:// at the beginning of a string.
  return url.replace(/^https?:\/\//, '');
}

// Example Usage:
let url1 = 'https://www.example.com/path';
console.log(removeProtocol(url1));  // Output: 'www.example.com/path'

let url2 = 'http://example.com';
console.log(removeProtocol(url2));  // Output: 'example.com'

let url3 = 'ftp://example.com';     // Does not match, so it's returned as is.
console.log(removeProtocol(url3));  // Output: 'ftp://example.com'

Output:

www.example.com/path
example.com
ftp://example.com
note

This method is concise, fast, and handles both http and httpsa in a single line.

How the Regular Expression Works​

Let's break down the pattern /^https?:\/\//:

  • / ... /: These forward slashes mark the beginning and end of the regular expression.
  • ^: This is an anchor. It asserts that the pattern must match at the beginning of the string.
  • s?: The s is a literal character. The ? is a quantifier that means "zero or one" of the preceding character. This makes the s optional, so the pattern matches both http and https.
  • :: A literal colon.
  • \/\/: The // are literal forward slashes. They must be escaped with a backslash (\) because a forward slash has a special meaning (it ends the regex pattern).

The replace() method finds this pattern and replaces it with an empty string (''), effectively deleting it.

If you are working with actual URLs, the most robust and professional method is to use the built-in URL object. This object is specifically designed to parse URLs correctly and gives you access to all of their components (hostname, pathname, etc.).

This method has the added benefit of validating the URL. If the string is not a valid URL, it will throw an error that you can catch.

Problem: you have a full URL and want to reliably extract everything after the protocol.

Solution:

function removeProtocolFromUrl(urlString) {
  try {
    let url = new URL(urlString);
    // Combine the hostname, pathname, and search parameters
    return `${url.hostname}${url.pathname}${url.search}`;
  } catch (error) {
    console.error('Invalid URL:', error);
    return urlString; // Return the original string if it's not a valid URL
  }
}

// Example Usage:
let url1 = 'https://www.example.com/path?query=123';
console.log(removeProtocolFromUrl(url1)); // Output: www.example.com/path?query=123

let url2 = 'not-a-valid-url';
console.log(removeProtocolFromUrl(url2)); // Output: not-a-valid-url (and logs an error)

Output:

www.example.com/path?query=123
Invalid URL: TypeError: Failed to construct 'URL': Invalid URL
    at removeProtocolFromUrl (<anonymous>:3:15)
    at <anonymous>:17:13
removeProtocolFromUrl @ VM156:7
(anonymous) @ VM156:17
not-a-valid-url

Conclusion​

Both methods are excellent, and the best one depends on your specific needs.

  • Use string.replace(/^https?:\/\//, '') for quick, simple string manipulation. It's the most direct way to remove the prefix and is very performant. This is the best choice if you are simply cleaning up a string.
  • Use the new URL() object when you are working with actual URLs. This is the recommended best practice for URL parsing because it is more robust, validates the URL's structure, and gives you access to all other parts of the URL (like the hostname, port, and search params) in a structured way.

Table of Contents