How to Replace HTTP with HTTPS in a String URL Using JavaScript?

In this article, we will see ways in which you can force https scheme instead of http in a JavaScript string containing a url. For all examples in this article, let's suppose we have the following url:

const url = 'http://example.com/path/?key=value#fragment';

Replacing the URL Scheme Using Regular Expressions

Using a regular expression, we can check whether a string starts with http:// or not, and accordingly, using replace(), we can replace it with https://. For example:

const updatedURL = url.replace(/^http:\/\//i, 'https://');

console.log(updatedURL);
// output: 'https://example.com/path/?key=value#fragment'

This would only replace to https:// when a string starts with http:// (case-insensitive), otherwise the original string is returned as is. To demonstrate this, let's see what happens when we use the same regular expression with a few other test cases:

Test Case	Result
""	""
http://abc.com	https://abc.com
https://abc.com	https://abc.com
//abc.com	//abc.com
news://abc.com	news://abc.com

Browser Support:

JavaScript String.prototype.replace() has great browser support — it is supported in all browsers (new and old).

Replacing the protocol Property of the URL Object

The protocol property of the JavaScript URL object contains the scheme of the URL (including the final ":"). For example:

const url = new URL('http://www.example.com/');

console.log(url.protocol); // output: 'http:'

The protocol property can be modified by simple assignment. Therefore, we can replace http: protocol (if it exists in the url) with https: like so:

const urlObj = new URL(url);

if (urlObj.protocol === 'http:') {
    urlObj.protocol = 'https:';
}

console.log(urlObj.toString());
// output: 'https://example.com/path/?key=value#fragment'

As you can see from the example above, the protocol is updated in the resulting url. This is reflective of the internal changes in the object itself, for example:

console.log(urlObj);

/* output: [object URL] {
  hash: "#fragment",
  host: "example.com",
  hostname: "example.com",
  href: "https://example.com/path/?key=value#fragment",
  origin: "https://example.com",
  password: "",
  pathname: "/path/",
  port: "",
  protocol: "https:",
  search: "?key=value",
  // ...
*/

Regardless of the case of the protocol passed into the URL object (or set by direct assignment), you can expect the resulting string from url.protocol to always be lowercase (unless the browser implementation does not adhere to RFC 1738 — in which case you can do urlObj.protocol.toLowerCase() when doing comparisons, etc.).

Browser Support:

The URL object is very well supported in modern browsers, but lacks support in Internet Explorer. If that's a concern, then please consider replacing the URL scheme using regular expressions instead.