JavaScript 驗證 URL

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. 使用 JavaScript URL 建構函式驗證 URL
  2. 在 JavaScript 中使用錨標記將字串驗證為 URL
  3. 在 JavaScript 中使用正規表示式匹配 URL 模式並驗證 URL
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'));

輸出:

使用 JavaScript URL 建構函式驗證 URL

該演示清楚地解釋了即使最後一個 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'));

輸出:

使用錨標記將字串驗證為 URL

isValidURL 函式獲取字串,一旦將其傳遞給 a.href,它就會獲得協議。

如果它不遵循 URL 模式,它不關心在字串上工作,並且這種情況將認為字串失敗並將其返回為 false

在 JavaScript 中使用正規表示式匹配 URL 模式並驗證 URL

正規表示式的 test() 方法匹配布林形式的輸出。當我們生成一個正規表示式來檢查字串是否是 URL 時,它只會導致 truefalse

程式碼片段:

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'));

輸出:

使用正規表示式匹配 URL 模式並驗證 URL

這裡的例項有一個特定的正規表示式模式,據此,明確提到了協議。這就是為什麼我們的第三個字串 en.wikipedia.org 將結果顯示為 false

但是,如果我們以不同的方式生成正規表示式,我們的第三種情況會很令人滿意,其中協議部分是可選的。

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript String