How to Check if a String Contains a Valid URL Format in JavaScript ?
A string containing a valid URL format adheres to standard conventions, comprising a scheme (e.g., “http://” or “https://”), domain, and optionally, a path, query parameters, and fragments. Ensuring this format is crucial for data consistency and accurate handling of URLs in applications.
There are several methods that can be used to check if a string contains a valid URL format in JavaScript.
Table of Content
- Using Regular Expressions
- Using URL Constructor
- Using the URL Object Available in Modern Browsers
- Using a Library (validator.js)
We will explore all the above methods along with their basic implementation with the help of examples.
Approach 1: Using Regular Expressions
Regular expressions are a powerful tool to match patterns in strings. We can use a regular expression to check if the string follows the valid URL format.
Syntax:
const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
Example: In this example, the isValidURL function uses a regex pattern to validate URLs. It returns true for valid URLs, and false otherwise.
function isValidURL(url) {
const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/i;
return urlPattern.test(url);
}
console.log(isValidURL(
"https://www.w3wiki.net/"));
console.log(isValidURL(
"https://ide.w3wiki.net/online-html-editor"));
console.log(isValidURL("invalid-url"));
Output
true true false
Approach 2: Using URL Constructor
URL constructor in JavaScript creates a URL object, checks if given string is a valid URL; throws error otherwise.
Syntax:
try {
new URL(url);
return true;
} catch (error) {
return false;
}
Example: In this example, the function uses the URL API to validate URLs. It returns true if valid, false otherwise.
function isValidURL(url) {
try {
new URL(url);
return true;
} catch (error) {
return false;
}
}
console.log(isValidURL(
"https://www.w3wiki.net/"));
console.log(isValidURL(
"https://ide.w3wiki.net/online-html-editor"));
console.log(isValidURL("invalid-url"));
Output
true true false
Approach 3: Using the URL Object Available in Modern Browsers
Modern browsers provide an URL object that can parse a URL string and validate it. This method is generally more reliable and less error-prone.
Syntax:
const urlObject = new URL(url);
Example: In this example, we are using the above-explained approach.
function isValidURL(url) {
try {
const urlObject = new URL(url);
// Additional checks, if necessary.
return true;
} catch (error) {
return false;
}
}
console.log(isValidURL(
"https://www.w3wiki.net/"));
console.log(isValidURL(
"https://ide.w3wiki.net/online-html-editor"));
console.log(isValidURL("invalid-url"));
Output
true true false
Approach 4: Using a Library (validator.js)
To check if a string contains a valid URL format using the validator.js library, first install the library using npm. Then, use the validator.isURL() method to validate the URL.
npm install validator
Example:
const validator = require('validator');
function isValidURL(str) {
return validator.isURL(str);
}
console.log(isValidURL("https://www.w3wiki.net/")); // true
console.log(isValidURL("example")); // false
Output
true
false
Contact Us