Dev Note | 如何利用正規表達式驗證網址格式
關於這篇文章：
- 驗證網址格式：此文主要介紹了如何利用正規表達式來驗證使用者輸入的網址，並且仔細說明這裡使用到的每個符號的作用，讓大家更好理解。
- HTTPS 與 HTTP 的差別：簡單說明了 HTTPS 和 HTTP 之間的不同，特別是為什麼現代網站大多選擇 HTTPS，來保護大家的資料安全。
- 伺服器會幫你自動跳轉：當伺服器有強制 HTTPS 時，就算使用者只輸入 http:// 或單純的域名，伺服器也會很貼心地自動把你導向 https://。
- 測試範例分享：文中也展示了幾個範例，像是有沒有加上 https:// 或是不同層次的域名，最後都能成功驗證。
在開始前，可以先參考MDN文件：Regular expressions 正規表達式
在驗證網址格式之前，我們可以先使用 Postman 測試輸入的 Body raw 是否正確，並確認是否有錯誤訊息彈出。
如下圖所示，當資料庫和後端程式碼都設置成功時，會回傳 success。
但是，由於我們還需要進一步驗證 videoLink 是否為有效網址，因此需要在程式中加入一些函數進行網址格式驗證。
簡單介紹 HTTP 和 HTTPS：
當我們談到網址時，最常見的就是大家熟悉的 HTTP 和 HTTPS。這裡簡單介紹一下兩者的差異：
- HTTPS (HyperText Transfer Protocol Secure)：
HTTPS 是 HTTP 的加密版本，使用 SSL/TLS 協議來加密傳輸中的數據，保護資料的機密性和完整性，特別是對於敏感資料（如登入密碼、個人資訊等）。HTTPS 網站通常會顯示一個鎖頭圖標，表示該網站是安全的。
- HTTP (HyperText Transfer Protocol)：
相較之下，HTTP 是明文傳輸協議，數據在傳輸過程中沒有加密，因此更容易受到攔截或篡改，這也使得 HTTP 網站更容易遭受中間人攻擊，導致敏感資訊洩露。
看完這些簡單說明，大家應該可以更理解 HTTP 和 HTTPS 之間的差異。如今大部分網站和應用程式都已經強制使用 HTTPS，特別是涉及個人資料、金流等敏感資訊的網站。
驗證網址格式的正規表達式：
為了驗證使用者輸入的網址格式正不正確，我們可以使用正規表達式來處理，我們先來看加入以下驗證函式後，且在 Body raw 的輸入值都不變的情況下，會不會出現錯誤訊息：
isValidUrl: (string) => {
// 使用正規表達式來驗證 URL 是否有效
const urlPattern = /^(https:\/\/)?([\da-z-]+\.)+[\da-z-]+(\/[\w-./?%&=]*)?$/i
return urlPattern.test(string)
}
如下圖所示，在 Body raw 都不變的情況下，顯示了無效 URL 的錯誤訊息。
接下來，讓我們來逐一解釋這個正規表達式中每個符號的意思：
const urlPattern = /^(https:\/\/)?([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/i
1. /^
/：正規表達式的開始符號。通常在程式中，正規表達式會包在斜線 / 之間。
^：錨點，表示必須從字串的開始匹配，也就是說這個正規表達式只能匹配以特定格式開頭的字串。
2. (https:\/\/)?
()：捕獲組，這裡是用來匹配 https:// 的部分。
捕獲組（Capturing Group）是一個正規表達式中的子模式，通常用來將匹配的部分內容提取出來。用小括號 () 包圍的部分稱為捕獲組，也可稱群組，匹配成功後，該組中的內容會被「捕獲」以便後續使用。舉例來說，如果你想要從一個完整的網址中提取出域名，你可以將域名部分包裝在捕獲組中，這樣它可以被單獨存取或分析。
https: 匹配字面上的 https。
\/: \ 是轉義符號，因為 / 是特殊字元，所以要用 \/ 來表示真正的斜線 /，這裡的 \/\/ 表示要匹配兩個斜線 //。
?: 表示前面的 https:// 是可選的（出現 0 次或 1 次），因此網址可以有 https:// 開頭，也可以沒有。
3. ([\da-z-]+\.)+
()：一樣表示一個捕獲組，這裡匹配主域名和次域名部分。
[]：是字符集合，匹配這個集合中的任意字符。
\d: 表示任意的數字（0-9）。
a-z: 表示從小寫字母 a 到 z 的任何一個字母。
-: 表示連字符號，允許在域名中出現。
（因為域名不能有 _ 所以這裡不能使用 \w。）
\.: \ 是轉義符號，因為 . 是特殊字元，必須轉義才能表示真正的點 .。通常用於分隔域名層級（例如 example.com 中的 .）。
+: 表示前面的模式可以出現一次或多次。這意味著可以匹配像 example.com、sub.example.com、www.example.com 等域名，至少有一個「字元加上點」的結構。
4. [\da-z-]+
[\da-z-]+: 這個部分和之前類似，這裡通常是匹配頂級域名（例如 .com、.org 等）。
這裡沒有後面的 \.，說明這是域名的最後一部分（也叫做頂級域名 Top-level Domain）。
5. (\/[\w-./?%&=]*)?
()：捕獲組，用於匹配 URL 的路徑部分（如果有的話）。
\/: 匹配 URL 路徑的開始斜線 /。
[\w-./?%&=]*：
\w: 表示字母（a-z, A-Z）、數字（0-9）或底線（_）。
-: 匹配連字符號。
.: 匹配點號（這裡就不需要轉義了，因為在 [] 中即表示字面上的點）。
/: 匹配斜線 /。
?%&=: 匹配這些特殊字元，它們經常出現在 URL 查詢參數中（例如 ?id=123&name=abc）。
*: 表示前面的字符集合可以出現 0 次或多次。也就是說，這部分的 URL 路徑和查詢參數是可選的，但如果有的話，可以有多個字符。
?: 整個路徑部分是可選的，URL 可以不包含路徑。
6. $/
$：錨點，表示字串的結尾。這意味著正規表達式必須匹配整個字串到最後。
/：正規表達式的結束符號。
7. i
忽略大小寫標誌。這意味著正規表達式在匹配時不區分字母大小寫，例如 HTTPS://example.com 也會被視為有效網址。
最後再來看 .test() 的用法：
return urlPattern.test(string)
.test() 是正規表達式內建的方法，用來測試給定的字串是否符合該正規表達式。它會返回一個布林值（true or false），表示字串是否通過驗證。
接著，我們來修改一下 Body raw 裡的值，再次用 postman 測試看看：
- 如下圖所示，由於我們將
https://設定為可選項，因此即使只輸入123.com，也能通過驗證。
補充說明：
如果伺服器設定了強制 HTTPS，那麼當使用者輸入http://123.com或只是123.com，伺服器會自動重定向到https://123.com。
- 如下圖所示，因為我們有設定域名可以出現一次或多次，所以
www.123.com也是可以通過驗證的。
- 如下圖所示，輸入標準的
https://123.com也會通過驗證，並返回成功訊息。
希望這篇文章能幫大家對正規表達式和網址驗證有更多認識。這些內容都是我東查西找再加上自己的理解整理出來的。如果有哪裡講得不對或是可以更好的地方,請一定要告訴我喔！每一個意見都是幫助我進步的養分 🫶🏻
你可能也想看
