在JavaScript中，可以使用正則表達式（RegExp）或使用內置的URL對象來校驗一個URL。下面是一些常用的方法以及對應的代碼示例：
- 使用正則表達式進行校驗：
function validateURL(url) {const pattern = /^(https?:\/\/)?(www\.)?[a-zA-Z0-9-]+\.[a-zA-Z]+(\/[^\s]*)?$/;return pattern.test(url);
}console.log(validateURL('https://www.example.com')); // true
console.log(validateURL('www.example.com')); // true
console.log(validateURL('example.com')); // true
console.log(validateURL('not a url')); // false
上述示例使用了一個正則表達式來匹配URL的模式：^(https?:\/\/)?(www\.)?[a-zA-Z0-9-]+\.[a-zA-Z]+(\/[^\s]*)?$，其中：
^表示匹配字符串的開頭(https?:\/\/)?表示可選的 “http://” 或 “https://” 的協議部分(www\.)?表示可選的 “www.” 子域名部分[a-zA-Z0-9-]+表示至少一個字母、數字或連字符\.[a-zA-Z]+表示一個點和至少一個字母的域名后綴(\/[^\s]*)?表示可選的路徑部分，以斜杠開始，后面跟零或多個非空白字符$表示匹配字符串的結尾
- 使用URL對象進行校驗：
function validateURL(url) {try {new URL(url);return true;} catch (error) {return false;}
}console.log(validateURL('https://www.example.com')); // true
console.log(validateURL('www.example.com')); // false
console.log(validateURL('example.com')); // false
console.log(validateURL('not a url')); // false
上述示例使用了JavaScript內置的URL對象，通過嘗試創建一個新的URL實例來判斷URL的有效性。如果URL無效，將拋出一個錯誤并被catch語句捕獲，返回false；如果URL有效，則返回true。
除此之外，還可以使用NPM包來驗證。在npm上有很多可以用來校驗URL的包，以下是其中一些常用的包：
-
valid-url：提供了一種簡單的方法來驗證URL。它支持驗證URL的協議、域名和路徑，并可以設置額外的選項來驗證更嚴格的URL模式。const validUrl = require('valid-url');console.log(validUrl.isUri('https://www.example.com')); // true console.log(validUrl.isUri('www.example.com')); // false console.log(validUrl.isUri('example.com')); // false console.log(validUrl.isUri('not a url')); // false -
url-regex：提供了一個正則表達式，可以用來檢查字符串中是否包含URL。const urlRegex = require('url-regex');console.log(urlRegex().test('Visit example.com')); // true console.log(urlRegex().test('Visit www.example.com')); // true console.log(urlRegex().test('not a url')); // false -
is-url：檢測給定的字符串是否是合法的URL。const isUrl = require('is-url');console.log(isUrl('https://www.example.com')); // true console.log(isUrl('www.example.com')); // true console.log(isUrl('example.com')); // true console.log(isUrl('not a url')); // false -
valid-url、url-regex和is-url都只能進行基本的URL驗證。如果需要更復雜的URL驗證，可以使用valid-url和其他驗證庫（如joi，yup等）結合使用。
這些包提供了不同的方法來校驗URL，并且可以根據具體的需求選擇合適的包。在選擇包時，要確保包的活躍度、文檔完整性和社區支持等因素。
看完本文如果覺得有用，記得點個贊支持，收藏起來說不定哪天就用上啦～
專注前端開發，分享前端相關技術干貨，公眾號：南城大前端（ID: nanchengfe）
)
