How do I check if a string is a valid URL in JavaScript?
Antek N
antek n profile pic

To check if a string is a valid URL in JavaScript, you can use regular expressions or theURL object. Here's a step-by-step approach using both methods: 1. Regular Expressions: - JavaScript provides regular expressions to match patterns. You can use a regular expression pattern to validate if a string conforms to the URL format. - Here's an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

   function isValidURL(url) {
     const pattern = new RegExp(
       '^(https?:\\/\\/)?' + // Protocol (optional)
       '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // Domain name
       '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR IP address
       '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // Port and path
       '(\\?[;&a-z\\d%_.~+=-]*)?' + // Query string
       '(\\#[-a-z\\d_]*)?$',
       'i'
     );
     return pattern.test(url);
   }
   

In this example, theisValidURL function takes aurl parameter. It creates a regular expression pattern that matches the URL format. The pattern includes components such as the protocol, domain name, IP address, port, path, query string, and fragment identifier. Thetest() method checks if theurl matches the pattern and returnstrue orfalse accordingly. 2.URL Object: - JavaScript also provides theURL object, which allows you to parse and manipulate URLs. You can create aURL object using the input string and check if it is valid based on its properties and methods. - Here's an example:

1
2
3
4
5
6
7
8
9
10

   function isValidURL(url) {
     try {
       new URL(url);
       return true;
     } catch (error) {
       return false;
     }
   }
   

In this example, theisValidURL function takes aurl parameter. It attempts to create a newURL object with the input string. If theURL object is created successfully, it indicates that the URL is valid, and the function returnstrue. If an error is thrown during the object creation, it means the URL is invalid, and the function returnsfalse. Here's an example usage of theisValidURL function:

1
2
3

console.log(isValidURL('https://www.example.com')); // Output: true
console.log(isValidURL('invalid-url')); // Output: false

In this example, theisValidURL function is called with two different strings—one representing a valid URL and the other an invalid URL. The function returnstrue for the valid URL andfalse for the invalid URL. Choose the method that suits your needs—regular expressions for more control over the URL format or theURL object for built-in URL parsing capabilities. Keep in mind that neither method guarantees that the URL exists or is accessible; they only validate the URL format.