正則表達(dá)式:解鎖前端表單校驗(yàn)的高效方法
正則表達(dá)式字符含意義
正則表達(dá)式(Regular Expression,簡稱為Regex或RegExp)是用于匹配和搜索文本模式的工具。它是一個強(qiáng)大且靈活的字符串處理工具,可以用來檢查一個字符串是否符合特定的模式,或者從一個文本中提取滿足條件的部分。
在正則表達(dá)式中,可以使用不同的元字符和特殊符號來定義模式。以下是一些常見的正則表達(dá)式元字符和它們的含義:
- .:匹配任意字符,除了換行符。
- *:匹配前面的元素零次或多次。
- +:匹配前面的元素一次或多次。
- ?:匹配前面的元素零次或一次。
- ^:匹配字符串的開始位置。
- $:匹配字符串的結(jié)束位置。
- []:定義字符集,匹配括號內(nèi)的任意一個字符。
- |:表示邏輯“或”,匹配兩個或多個表達(dá)式之一。
- ():分組,將表達(dá)式組合為一個子表達(dá)式,可以使用 | 和量詞對整個組進(jìn)行操作。用法當(dāng)談到正則表達(dá)式時,還有一些其他重要的概念和用法需要了解:
- 字符類和量詞: 在正則表達(dá)式中,使用方括號 [] 來定義字符類,它可以匹配方括號內(nèi)的任意一個字符。例如,[aeiou] 匹配任何一個元音字母。使用花括號 {} 可以指定匹配的次數(shù),例如,a{2,4} 匹配連續(xù)兩到四個字母 a。
- 預(yù)定義字符類: 正則表達(dá)式提供了一些預(yù)定義的字符類,例如,\d 匹配任意一個數(shù)字,\w 匹配任意一個字母或數(shù)字,\s 匹配任意一個空白字符。
- 轉(zhuǎn)義字符: 反斜杠 \ 是正則表達(dá)式的轉(zhuǎn)義字符,用于轉(zhuǎn)義特殊字符,使其失去特殊含義。例如,\. 可以匹配真正的句點(diǎn)而不是匹配任意字符。
- 貪婪匹配和非貪婪匹配: 正則表達(dá)式默認(rèn)是貪婪匹配,即盡可能多地匹配字符。非貪婪匹配在量詞后加上問號 ?,使其盡可能少地匹配字符。例如,.* 是貪婪匹配,而 .*? 是非貪婪匹配。
- 邊界匹配: 正則表達(dá)式可以用 ^ 表示字符串的開始,用 $ 表示字符串的結(jié)束。這樣可以確保模式匹配必須出現(xiàn)在字符串的開始或結(jié)束位置。
- 替換和捕獲: 正則表達(dá)式可以用于替換文本中的匹配項(xiàng),也可以使用括號 () 進(jìn)行捕獲,并在替換中引用捕獲的內(nèi)容。
- 修飾符: 正則表達(dá)式通常支持一些修飾符來修改其行為。例如,i 表示不區(qū)分大小寫,g 表示全局匹配,m 表示多行匹配等。
不過,不同的編程語言和工具對正則表達(dá)式的支持可能有所不同,因此在具體應(yīng)用中需要查閱相應(yīng)的文檔和規(guī)范。
RegExp函數(shù)
const regex = new RegExp("pattern",gi);
RegExp屬性
在 JavaScript 中,正則表達(dá)式的構(gòu)造函數(shù) RegExp 具有以下屬性:
- source(只讀): 返回正則表達(dá)式的模式字符串,即正則表達(dá)式的文本模式部分。
- global(只讀): 返回一個布爾值,表示是否開啟全局匹配模式。如果為 true,則正則表達(dá)式會匹配所有符合模式的文本,而不是在找到第一個匹配后停止。
- ignoreCase(只讀): 返回一個布爾值,表示是否開啟忽略大小寫模式。如果為 true,則正則表達(dá)式在匹配時會忽略大小寫。
- multiline(只讀): 返回一個布爾值,表示是否開啟多行匹配模式。如果為 true,則正則表達(dá)式中的 ^ 和 $ 會匹配字符串中每一行的開始和結(jié)束位置。
- sticky(只讀): 返回一個布爾值,表示是否開啟粘連匹配模式。如果為 true,則正則表達(dá)式將會從目標(biāo)字符串的當(dāng)前 lastIndex 位置開始匹配。
- unicode(只讀): 返回一個布爾值,表示是否開啟 Unicode 匹配模式。如果為 true,則正則表達(dá)式會正確處理 Unicode 字符。
- flags(只讀): 返回包含正則表達(dá)式標(biāo)志的字符串,標(biāo)志是用來指定正則表達(dá)式的附加選項(xiàng)的,例如 "gi" 表示同時開啟全局匹配和忽略大小寫模式。
這些屬性可以通過正則表達(dá)式對象的構(gòu)造函數(shù) RegExp 的實(shí)例來訪問。例如:
const regex = new RegExp("pattern", "gi");
console.log(regex.source); // "pattern"
console.log(regex.global); // true
console.log(regex.ignoreCase); // true
console.log(regex.multiline); // false
console.log(regex.sticky); // false
console.log(regex.unicode); // false
console.log(regex.flags); // "gi"
以上代碼中的 "pattern" 是一個示例正則表達(dá)式的模式字符串,可以根據(jù)需要替換成實(shí)際的正則表達(dá)式模式。
RegExp對象方法
在 JavaScript 中,正則表達(dá)式的構(gòu)造函數(shù) RegExp 以及正則表達(dá)式對象都有一些方法可以用于執(zhí)行不同的操作。以下是常見的正則表達(dá)式方法:
- test(): 在字符串中測試正則表達(dá)式是否匹配。返回一個布爾值,表示是否找到匹配項(xiàng)。
const regex = /pattern/;
const text = "This is a pattern test.";
console.log(regex.test(text)); // true
- exec(): 在字符串中執(zhí)行正則表達(dá)式搜索,返回匹配結(jié)果的數(shù)組或 null。該方法返回一個數(shù)組,包含匹配到的文本以及捕獲組的信息。
const regex = /pattern/g;
const text = "This is a pattern test.";
let match = regex.exec(text);
while (match !== null) {
console.log(match[0]); // 輸出匹配到的文本
match = regex.exec(text); // 繼續(xù)搜索下一個匹配項(xiàng)
}
- match(): 在字符串中搜索匹配項(xiàng),返回匹配結(jié)果的數(shù)組或 null。如果正則表達(dá)式帶有全局標(biāo)志 g,則返回所有匹配項(xiàng)的數(shù)組。否則,只返回第一個匹配項(xiàng)的數(shù)組。
const regex = /pattern/g;
const text = "This is a pattern test.";
const matches = text.match(regex);
console.log(matches); // ["pattern"]
- search(): 在字符串中查找匹配項(xiàng),返回第一個匹配項(xiàng)的索引。如果找不到匹配項(xiàng),則返回 -1。
const regex = /pattern/;
const text = "This is a pattern test.";
console.log(text.search(regex)); // 10
- replace(): 在字符串中使用替換文本替換匹配項(xiàng)。
const regex = /pattern/g;
const text = "This is a pattern test.";
const replacedText = text.replace(regex, "replacement");
console.log(replacedText); // "This is a replacement test."
RegExp`構(gòu)造函數(shù)的第二個參數(shù)
除了 "gi"(全局匹配和忽略大小寫)之外,RegExp 構(gòu)造函數(shù)的第二個參數(shù)還可以包含其他標(biāo)志,用于指定正則表達(dá)式的附加選項(xiàng)。以下是常見的標(biāo)志:
- g(全局匹配): 查找所有匹配項(xiàng),而不是在找到第一個匹配項(xiàng)后停止。
- i(忽略大小寫): 在匹配時忽略目標(biāo)字符串的大小寫。
- m(多行匹配): 開啟多行模式。在此模式下,^ 和 $ 會匹配字符串中每一行的開始和結(jié)束位置,而不僅僅是整個字符串的開始和結(jié)束。
- s(單行匹配): 開啟單行模式。在此模式下,. 可以匹配包括換行符在內(nèi)的任意字符。
- u(Unicode 匹配): 開啟 Unicode 模式。在此模式下,將正確處理 Unicode 字符。
- y(粘連匹配): 開啟粘連匹配模式。正則表達(dá)式將從目標(biāo)字符串的當(dāng)前 lastIndex 位置開始匹配。
- d(具有 dollar 符號的特殊字符): 開啟允許使用 $ 符號匹配行尾。
這些標(biāo)志可以單獨(dú)使用,也可以組合使用。例如,如果需要開啟全局匹配、忽略大小寫和多行匹配,可以使用 "gim"。
注意:
- 標(biāo)志的順序并不重要,例如 "gi" 和 "ig" 都會開啟全局匹配和忽略大小寫。
- 如果在構(gòu)造函數(shù)中同時使用了某個標(biāo)志,在正則表達(dá)式字面量中也使用了相同標(biāo)志,正則表達(dá)式字面量中的標(biāo)志會覆蓋構(gòu)造函數(shù)中的標(biāo)志。例如:new RegExp("pattern", "i") 和 /pattern/i 是等效的,都表示忽略大小寫匹配。
- 不是所有的標(biāo)志都在所有 JavaScript 引擎中都得到支持。因此,在使用非全局共享的正則表達(dá)式時,最好只使用必要的標(biāo)志。
常用的正則例子
只包含數(shù)字(包括正數(shù)、負(fù)數(shù)、零)
const reg = /^-?\d+(\.\d+)?$/;
console.log(reg.test(123)); // true
console.log(reg.test(-123)); // true
console.log(reg.test(-12.3)); // true
console.log(reg.test(0)); // true
console.log(reg.test('0aaaaa')); // false
解釋:
- ^ 表示匹配字符串的開始位置。
- -? 表示可選的負(fù)號,即匹配一個或零個減號。
- \d+ 表示匹配一個或多個數(shù)字。
- (\.\d+)? 表示可選的小數(shù)部分,其中 \. 表示匹配一個點(diǎn)(小數(shù)點(diǎn)),\d+ 表示匹配一個或多個數(shù)字。
- $ 表示匹配字符串的結(jié)束位置。
注意:
- 這個正則表達(dá)式只匹配純數(shù)字字符串,不包含指數(shù)形式(如科學(xué)計數(shù)法)。
- 如果要匹配純整數(shù)字符串(不包含小數(shù)),可以去掉 (\.\d+)? 部分,即使用 ^-?\d+$。只包含英文數(shù)字及下劃線要匹配只包含英文字母、數(shù)字和下劃線的正則表達(dá)式,可以使用以下模式:
const reg = /^[A-Za-z0-9_]+$/;
console.log(reg.test(123)); // true
console.log(reg.test(-123)); // false
console.log(reg.test('aaa11')); // true
console.log(reg.test('_a')); // true
解釋:
- ^ 表示匹配字符串的開始位置。
- [A-Za-z0-9_] 表示一個字符類,匹配任意一個大寫字母、小寫字母、數(shù)字或下劃線。
- + 表示匹配前面的元素一個或多個次數(shù)。
- $ 表示匹配字符串的結(jié)束位置。
注意:
- 這個正則表達(dá)式只匹配完全由英文字母、數(shù)字和下劃線組成的字符串。
- 如果字符串可以為空(即長度為零),可以將 + 修改為 *,即使用 ^[A-Za-z0-9_]*$。這樣可以允許空字符串的匹配。
只包含中英文數(shù)字及鍵盤上的特殊字符
要匹配只包含中文、英文字母、數(shù)字以及鍵盤上的特殊字符的正則表達(dá)式,可以使用以下模式:
const reg = /^[\u4E00-\u9FA5A-Za-z0-9`~!@#$%^&*()_\-+=\[\]{}|\\:;"'<>,.?/]+$/;
解釋:
- ^ 表示匹配字符串的開始位置。
- [\u4E00-\u9FA5] 表示匹配中文字符的范圍,它包含了常見的中文字符。
- A-Za-z 表示匹配任意一個大寫字母或小寫字母。
- 0-9 表示匹配任意一個數(shù)字。
- `~!@#$%^&*()_\-+=\[\]{}|\\:;"'<>,.?/` 表示匹配鍵盤上的特殊字符。
- + 表示匹配前面的元素一個或多個次數(shù)。
- $ 表示匹配字符串的結(jié)束位置。
這個正則表達(dá)式可以匹配只包含中文、英文字母、數(shù)字以及鍵盤上的特殊字符的字符串。
注意:
- 這個正則表達(dá)式僅包含了一部分常見的中文字符,并不包含全部的中文字符范圍。如果需要涵蓋更多中文字符,可以根據(jù)需求擴(kuò)展范圍。
- 對于特殊字符的范圍,這里列出了一些常見的特殊字符,但并不是所有鍵盤上的特殊字符都包含在內(nèi)。如果有特定特殊字符需求,可以在方括號中添加相應(yīng)的字符。
- 由于涉及中文字符,建議使用 Unicode 編碼表示中文字符的范圍,因此 \u4E00-\u9FA5 表示中文字符的范圍。
校驗(yàn)密碼是否符合規(guī)則的正則
要校驗(yàn)密碼是否符合規(guī)則,通常可以使用正則表達(dá)式來檢查密碼是否滿足特定的要求。下面是一個示例正則表達(dá)式,用于校驗(yàn)密碼是否符合一般的密碼規(guī)則:
這個正則表達(dá)式強(qiáng)制密碼必須包含至少一個字母、一個數(shù)字和一個特殊字符,并且密碼長度至少為 8 個字符。
const reg =/ ^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
解釋:
- ^ 表示匹配字符串的開始位置。
- (?=.*[A-Za-z]) 表示使用正向肯定預(yù)查來確保密碼中包含至少一個字母(大小寫均可)。
- (?=.*\d) 表示使用正向肯定預(yù)查來確保密碼中包含至少一個數(shù)字。
- (?=.*[@$!%*?&]) 表示使用正向肯定預(yù)查來確保密碼中包含至少一個特殊字符(可以根據(jù)需要擴(kuò)展特殊字符的范圍)。
- [A-Za-z\d@$!%*?&]{8,} 表示匹配至少包含 8 個以上字符的字母、數(shù)字和特殊字符的組合。
- $ 表示匹配字符串的結(jié)束位置。請根據(jù)自己的密碼需求更改正則。
校驗(yàn)http或者h(yuǎn)ttps端口號的正則
校驗(yàn) HTTP 或 HTTPS 端口號的正則表達(dá)式可以使用以下模式:
const reg = /^(http|https):\/\/(www\.)?[A-Za-z0-9]+\.[A-Za-z]+(:[0-9]+)?$/
解釋:
- ^ 表示匹配字符串的開始位置。
- (http|https) 表示匹配 "http" 或 "https" 中的一個。
- :\/\/ 表示匹配 "://"。
- (www\.)? 表示匹配可選的 "www.",即網(wǎng)址可能有 "www." 前綴或沒有。
- [A-Za-z0-9]+ 表示匹配至少一個字母或數(shù)字。
- \. 表示匹配點(diǎn)(用于域名部分的分隔)。
- [A-Za-z]+ 表示匹配至少一個字母(用于域名的頂級域部分)。
- (:[0-9]+)? 表示匹配可選的冒號加上至少一個數(shù)字,用于表示端口號。
- $ 表示匹配字符串的結(jié)束位置。
這個正則表達(dá)式可以匹配以下樣例:
請注意:
- 這個正則表達(dá)式只校驗(yàn) URL 中的域名部分和端口號,不涉及其他 URL 組件(例如路徑、查詢參數(shù)等)的校驗(yàn)。
- 此處的正則表達(dá)式是一個簡單的示例,實(shí)際的 URL 校驗(yàn)可能更加復(fù)雜,可以根據(jù)需求進(jìn)行修改和擴(kuò)展。
- 在實(shí)際應(yīng)用中,也可以使用編程語言提供的 URL 解析函數(shù)或庫來解析 URL,并從中提取出域名和端口號進(jìn)行校驗(yàn)。
只校驗(yàn)端口號
校驗(yàn)端口號是否正確的正則表達(dá)式如下:
const reg =/^(0|([1-9]\d{0,3})|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
解釋:這個正則表達(dá)式用于校驗(yàn)端口號是否正確。它可以匹配范圍在 0 到 65535 的合法端口號。端口號是一個 16 位無符號整數(shù)。
正則表達(dá)式的具體規(guī)則如下:
- ^ 表示匹配字符串的開始位置。
- 0 匹配端口號為 0 的情況。
- [1-9]\d{0,3} 匹配端口號在 1 到 9999 之間的情況。
- [1-5]\d{4} 匹配端口號在 10000 到 59999 之間的情況。
- 6[0-4]\d{3} 匹配端口號在 60000 到 64999 之間的情況。
- 65[0-4]\d{2} 匹配端口號在 65000 到 65499 之間的情況。
- 655[0-2]\d 匹配端口號在 65500 到 65529 之間的情況。
- 6553[0-5] 匹配端口號在 65530 到 65535 之間的情況。
- $ 表示匹配字符串的結(jié)束位置。
這個正則表達(dá)式可以用于驗(yàn)證端口號是否在 0 到 65535 的范圍內(nèi),是否為合法的端口號。
校驗(yàn)正確的ip地址
要校驗(yàn)是否是正確的 IP 地址(IPv4 或 IPv6),可以使用以下兩個正則表達(dá)式分別進(jìn)行匹配:
IPv4 地址的正則表達(dá)式:
const reg = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})(\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})){3}$/;
IPv6 地址的正則表達(dá)式:
const reg = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/;
解釋:
IPv4 地址的正則表達(dá)式:
- ^ 表示匹配字符串的開始位置。
- (25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2}) 表示匹配 0 到 255 之間的數(shù)字,考慮到前導(dǎo)零的情況。
- \. 表示匹配點(diǎn)。
- (\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})){3} 表示匹配三個點(diǎn)隔開的數(shù)字段。
- $ 表示匹配字符串的結(jié)束位置。
這個正則表達(dá)式可以校驗(yàn) IPv4 地址是否合法。
IPv6 地址的正則表達(dá)式:
- ^ 表示匹配字符串的開始位置。
- ([0-9a-fA-F]{1,4}:){7} 表示匹配 7 組以冒號分隔的 16 進(jìn)制數(shù)。
- [0-9a-fA-F]{1,4} 表示匹配一個 16 進(jìn)制數(shù)。
- $ 表示匹配字符串的結(jié)束位置。
這個正則表達(dá)式可以校驗(yàn) IPv6 地址是否合法。
請注意,正則表達(dá)式僅可以校驗(yàn) IP 地址的格式是否正確,無法判斷其是否為真實(shí)可用的 IP 地址。如果需要對 IP 地址進(jìn)行更嚴(yán)格的驗(yàn)證,可以在代碼中進(jìn)一步檢查 IP 地址的有效性。
一些號碼(電話號、身份證、銀行卡)
這里給到的示例只針對中國大陸使用的:
const regPhone = /^\+?[0-9\s-]+$/; // 電話號碼
const regId = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dX]$/; // 身份證號
const regBank = /^[1-9]\d{9,18}$/; //銀行卡號