How to Check if a String is a URL in JavaScript

Tari Ibaba
Last updated on September 08, 2022
How to Check if a String is a URL in JavaScript

In this article, we'll be looking at multiple ways to easily check if a string is a valid URL in JavaScript.

1. Catch Exception from URL() Constructor

To check if a string is a URL, pass the string to the URL() constructor. If the string is a valid URL, a new URL object will be created successfully. Otherwise, an error will be thrown. Using a try...catch block, we can handle the error and perform the appropriate action when the URL is invalid.

For example:

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

console.log(isValidUrl('https://wp.codingbeautydev.com')); // true
console.log(isValidUrl('app://wp.codingbeautydev.com')); // true
console.log(isValidUrl('Coding Beauty')); // false

To check for a valid HTTP URL, we can use the protocol property of the URL object.

function isValidHttpUrl(string) {
  try {
    const url = new URL(string);
    return url.protocol === 'http:' || url.protocol === 'https:';
  } catch (err) {
    return false;
  }
}

console.log(isValidHttpUrl('https://wp.codingbeautydev.com')); // true
console.log(isValidHttpUrl('app://wp.codingbeautydev.com')); // false
console.log(isValidHttpUrl('Coding Beauty')); // false

The URL protocol property returns a string representing the protocol scheme of the URL, including the final colon (:). HTTP URLs have a protocol of either http: or https:.

2. Regex Matching

Alternatively, we can check if a string is a URL using a regular expression. We do this by calling the test() method on a RegExp object with a pattern that matches a string that is a valid URL.

function isValidUrl(str) {
  const pattern = new RegExp(
    '^([a-zA-Z]+:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidUrl('https://wp.codingbeautydev.com')); // true
console.log(isValidUrl('app://wp.codingbeautydev.com')); // true
console.log(isValidUrl('Coding Beauty')); // false

The RegExp test() method searches for a match between a regular expression and a string. It returns true if it finds a match. Otherwise, it returns false.

To check for a valid HTTP URL, we can alter the part of the regex that matches the URL protocol:

function isValidHttpUrl(str) {
  const pattern = new RegExp(
    '^(https?:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$', // fragment locator
    'i'
  );
  return pattern.test(str);
}

console.log(isValidHttpUrl('https://wp.codingbeautydev.com')); // true
console.log(isValidHttpUrl('app://wp.codingbeautydev.com')); // false
console.log(isValidHttpUrl('Coding Beauty')); // false

The https?: pattern will only match either http: or https:.

3. is-url and is-url-http NPM Packages

We can also use the is-url NPM package to quickly check if a string is a valid URL.

import isUrl from 'is-url';

console.log(isUrl('https://wp.codingbeautydev.com')); // true
console.log(isUrl('app://wp.codingbeautydev.com')); // true
console.log(isUrl('Coding Beauty')); // false

To quickly check if a string is a valid HTTP URL, we can use the is-url-http package from NPM.

import isUrlHttp from 'is-url-http';

console.log(isUrlHttp('https://wp.codingbeautydev.com')); // true
console.log(isUrlHttp('app://wp.codingbeautydev.com')); // false
console.log(isUrlHttp('Coding Beauty')); // false
Coding Beauty Assistant logo

Try Coding Beauty AI Assistant for VS Code

Meet the new intelligent assistant: tailored to optimize your work efficiency with lightning-fast code completions, intuitive AI chat + web search, reliable human expert help, and more.

See also