HOWTO · JavaScript
JavaScript 驗證 URL
為了驗證 URL，我們可以使用 JavaScript 的 URL 建構函式來獲取字串。此外，我們可以操作 DOM，建立錨標記，並將字串作為 href 傳遞。另一種方法是將 URL 與具有協議、主機名模式的某個正規表示式匹配。
本頁內容
在 JavaScript 中，你可以使用數字約定來驗證 URL。如果我們剖析一個 URL，我們會得到一個協議、主機名、域名、單個或多個階段的路徑。
我們將使用 JavaScript URL 建構函式來獲取給定的字串。之後，我們將把我們的字串傳遞給一個錨標籤，看看這個方法是如何反應的。
匹配字串和 URL 的最常見方法是執行正規表示式 test()。
使用 JavaScript URL 建構函式驗證 URL
JavaScript URL 建構函式及其接受字串的方式側重於基本的 URL 模式——協議、主機名、域名等。
我們將為以下示例啟動一個 try-catch 範圍，並讓 try 範圍檢查字串是否遵循基本 URL 模式。否則，我們將認為字串失敗並繼續進行。
程式碼片段：
function isValidHttpUrl(string) {
var url;
try {
url = new URL(string);
} catch (err) {
return false;
}
return url.protocol === 'http:' || url.protocol === 'https:';
}
console.log(isValidHttpUrl('file:///Y:/bleh/index.html'));
console.log(isValidHttpUrl('https://www.youtube.com/watch?v=iFP-EWO_Q_o'));
console.log(isValidHttpUrl('en.wikipedia.org'));
輸出：
該演示清楚地解釋了即使最後一個 URL 在瀏覽器中顯示為 wikipedia.org，我們的函式 isValidHttpUrl 將顯示 false。它沒有先前的協議，並且這樣的模式不被視為 URL。
在 JavaScript 中使用錨標記將字串驗證為 URL
一個錨標記後跟一個 href (header reference)。每當我們建立這樣一個元素並嘗試操作 DOM 時，我們都會將字串設定為 a.href。
因此，將附加一個缺少協議的 hostname。讓我們檢查例項以獲得清晰的檢視。
程式碼片段：
function isValidURL(str) {
var a = document.createElement('a');
a.href = str;
return a.protocol === 'http:' || a.protocol === 'https:';
}
console.log(isValidURL('file:///Y:/bleh/index.html'));
console.log(isValidURL('https://www.youtube.com/watch?v=iFP-EWO_Q_o'));
console.log(isValidURL('en.wikipedia.org'));
輸出：
isValidURL 函式獲取字串，一旦將其傳遞給 a.href，它就會獲得協議。
如果它不遵循 URL 模式，它不關心在字串上工作，並且這種情況將認為字串失敗並將其返回為 false。
在 JavaScript 中使用正規表示式匹配 URL 模式並驗證 URL
正規表示式的 test() 方法匹配布林形式的輸出。當我們生成一個正規表示式來檢查字串是否是 URL 時，它只會導致 true 或 false。
程式碼片段：
function isValidUrl(string) {
const pattern =
/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/gm;
return pattern.test(string);
}
console.log(isValidUrl('file:///Y:/bleh/index.html'));
console.log(isValidUrl('https://www.youtube.com/watch?v=iFP-EWO_Q_o'));
console.log(isValidUrl('en.wikipedia.org'));
輸出：
這裡的例項有一個特定的正規表示式模式，據此，明確提到了協議。這就是為什麼我們的第三個字串 en.wikipedia.org 將結果顯示為 false。
但是，如果我們以不同的方式生成正規表示式，我們的第三種情況會很令人滿意，其中協議部分是可選的。
