JavaScript 驗證 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
。
但是,如果我們以不同的方式生成正規表示式,我們的第三種情況會很令人滿意,其中協議部分是可選的。