前言
在前端開(kāi)發(fā)中，經(jīng)常需要處理 URL 地址、校驗(yàn)手機(jī)號(hào)合法性、提取域名等。正則表達(dá)式是一種常用的工具。通過(guò)使用正則表達(dá)式，我們可以對(duì)用戶(hù)輸入進(jìn)行有效的驗(yàn)證，確保數(shù)據(jù)的合法性和完整性。本文將介紹一些常見(jiàn)的正則表達(dá)式，幫助你在開(kāi)發(fā)中處理匹配的關(guān)鍵信息。
一、正則表達(dá)式的常用用法
1.1 模式匹配（match 方法）
在這個(gè)示例中，我們使用 match 方法來(lái)執(zhí)行模式匹配操作。用戶(hù)在文本輸入框中輸入的文本將與正則表達(dá)式 /abc/ 進(jìn)行匹配，匹配結(jié)果將顯示在頁(yè)面上。
<template>
<div>
<input type="text" v-model="inputText" placeholder="輸入文本">
<button @click="matchPattern">匹配</button>
<p>匹配結(jié)果: {{ matchResult }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputText: "",
matchResult: "",
};
},
methods: {
matchPattern() {
const pattern = /abc/; // 匹配包含子字符串 "abc" 的任何字符串
this.matchResult = this.inputText.match(pattern);
},
},
};
</script>
實(shí)現(xiàn)效果
1.2 替換操作（replace 方法）
在這個(gè)示例中，我們使用 replace 方法來(lái)執(zhí)行替換操作。用戶(hù)在文本輸入框中輸入的文本中的匹配項(xiàng)將被替換為指定的字符串。在示例中，我們將正則表達(dá)式 /abc/ 匹配到的文本替換為 xyz。
<template>
<div>
<input type="text" v-model="inputText" placeholder="輸入文本">
<button @click="replacePattern">替換</button>
<p>替換結(jié)果: {{ replaceResult }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputText: "",
replaceResult: "",
};
},
methods: {
replacePattern() {
const pattern = /abc/; // 替換包含子字符串 "abc" 的任何字符串
this.replaceResult = this.inputText.replace(pattern, "xyz");
},
},
};
</script>
實(shí)現(xiàn)效果
1.3 分割和分組（split 方法）
在這個(gè)示例中，我們使用 split 方法來(lái)執(zhí)行分割操作。用戶(hù)在文本輸入框中輸入的文本將根據(jù)正則表達(dá)式 /\s+/ 進(jìn)行分割，分割結(jié)果將以列表形式顯示在頁(yè)面上。
<template>
<div>
<input type="text" v-model="inputText" placeholder="輸入文本">
<button @click="splitText">分割</button>
<ul>
<li v-for="item in splitResult" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
inputText: "",
splitResult: [],
};
},
methods: {
splitText() {
const pattern = /\s+/; // 匹配一個(gè)或多個(gè)連續(xù)的空白字符
this.splitResult = this.inputText.split(pattern);
},
},
};
</script>
實(shí)現(xiàn)效果
1.4 驗(yàn)證輸入（test 方法）
在這個(gè)示例中，我們使用 test 方法來(lái)執(zhí)行驗(yàn)證操作。用戶(hù)在文本輸入框中輸入的文本將與正則表達(dá)式 /^\d{4}$/ 進(jìn)行匹配，如果匹配成功，則輸入被視為有效，否則被視為無(wú)效。
<template>
<div>
<input type="text" v-model="inputText" placeholder="輸入文本">
<button @click="validateInput">驗(yàn)證</button>
<p v-if="isValid">輸入有效</p>
<p v-else>輸入無(wú)效</p>
</div>
</template>
<script>
export default {
data() {
return {
inputText: "",
isValid: false,
};
},
methods: {
validateInput() {
const pattern = /^\d{4}$/; // 確保一個(gè)字符串由四個(gè)數(shù)字字符組成，且沒(méi)有其他額外的字符。例如，可以匹配 "1234" 或 "5278"，但不匹配 "12" 或 "12345"。
this.isValid = pattern.test(this.inputText);
},
},
};
</script>
實(shí)現(xiàn)效果
1.5 數(shù)據(jù)搜索（search 方法）
在這個(gè)示例中，我們使用 search() 方法來(lái)搜索輸入文本中是否包含指定的正則表達(dá)式模式。如果找到匹配，則將匹配的字符串添加到 matches 數(shù)組中；否則，將其設(shè)置為空數(shù)組。請(qǐng)注意，search() 方法返回匹配的字符串的起始位置，而不是匹配的字符串本身。因此，我們需要使用 slice() 方法來(lái)獲取匹配的字符串。
<template>
<div>
<input type="text" v-model="inputText">
<button @click="searchUsingRegex">搜索</button>
<div v-if="matches.length > 0">
<p>匹配到的單詞：</p>
<ul>
<li v-for="match in matches" :key="match">{{ match }}</li>
</ul>
</div>
<div v-else>
<p>沒(méi)有匹配到單詞。</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputText: "",
matches: [],
};
},
methods: {
searchUsingRegex() {
const regex = /^p\w+/; // 匹配以字母 "p" 開(kāi)頭，后面跟著一個(gè)或多個(gè)字母、數(shù)字或下劃線的字符串
const match = this.inputText.search(regex);
if (match !== -1) {
this.matches = [this.inputText.slice(match)];
} else {
this.matches = [];
}
},
},
};
</script>
實(shí)現(xiàn)效果
1.6 數(shù)據(jù)提?。╡xec 方法）
在這個(gè)示例中，我們使用正則表達(dá)式 /\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}\\b/g 來(lái)匹配郵箱地址。然后，我們使用 exec() 方法來(lái)提取輸入文本中的所有匹配項(xiàng)。
<template>
<div>
<input type="text" v-model="inputText">
<button @click="extractEmails">提取郵箱</button>
<div v-if="emails.length > 0">
<p>提取到的郵箱地址：</p>
<ul>
<li v-for="email in emails" :key="email">{{ email }}</li>
</ul>
</div>
<div v-else>
<p>沒(méi)有找到郵箱地址。</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputText: "",
emails: [],
};
},
methods: {
extractEmails() {
const regex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}\b/g; // 匹配合法的郵箱地址
let match;
this.emails = [];
while ((match = regex.exec(this.inputText)) !== null) {
this.emails.push(match[0]);
}
},
},
};
</script>
實(shí)現(xiàn)效果
二、常用正則表達(dá)式修飾符和表達(dá)模式
2.1 修飾符可以在全局搜索中不區(qū)分大小寫(xiě)
| 修飾符 | 解釋 |
|---|---|
| i | 執(zhí)行對(duì)大小寫(xiě)不敏感的匹配。 |
| g | 執(zhí)行全局匹配（查找所有匹配而非在找到第一個(gè)匹配后停止） |
| m | 執(zhí)行多行匹配。 |
2.2 方括號(hào)用于查找某個(gè)范圍內(nèi)的字符
| 表達(dá)式 | 解釋 |
|---|---|
| [abc] | 查找方括號(hào)之間的任何字符。 |
| [0-9] | 查找任何從 0 至 9 的數(shù)字。 |
| (x | y) |
2.3 元字符是擁有特殊含義的字符
| 元字符 | 解釋 |
|---|---|
| \d | 查找數(shù)字。 |
| \s | 查找空白字符。 |
| \b | 匹配單詞邊界。 |
| \uxxxx | 查找以十六進(jìn)制數(shù) xxxx 規(guī)定的 Unicode 字符。 |
| \B | 匹配非單詞邊界?！甧r\B’ 能匹配 “verb” 中的 ‘er’，但不能匹配 “never” 中的 ‘er’。 |
| \D | 匹配一個(gè)非數(shù)字字符。等價(jià)于 [^0-9]。 |
| \n | 匹配一個(gè)換行符。等價(jià)于 \x0a 和 \cJ。 |
| \r | 匹配一個(gè)回車(chē)符。等價(jià)于 \x0d 和 \cM。 |
| \S | 匹配任何非空白字符。等價(jià)于 [^ \f\n\r\t\v]。 |
| \w | 匹配字母、數(shù)字、下劃線。等價(jià)于’[A-Za-z0-9_]'。 |
| \W | 匹配非字母、數(shù)字、下劃線。等價(jià)于 ‘[^A-Za-z0-9_]’。 |
| \f | 匹配一個(gè)換頁(yè)符。等價(jià)于 \x0c 和 \cL。 |
2.4 量詞
| 量詞 | 解釋 |
|---|---|
| n+ | 匹配任何包含至少一個(gè) n 的字符串。 |
| n* | 匹配任何包含零個(gè)或多個(gè) n 的字符串。 |
| n? | 匹配任何包含零個(gè)或一個(gè) n 的字符串。 |
| {n,m} | 匹配前面的模式至少 n 次且不超過(guò) m 次。 |
| {n,} | 匹配前面的模式至少 n 次。 |
| {n} | 匹配前面的模式恰好 n 次。 |
三、常見(jiàn)的正則表達(dá)式
3.1 校驗(yàn)數(shù)字的表達(dá)式
數(shù)字：
^[0-9]*$
n 位的數(shù)字：
^\d{n}$
至少 n 位的數(shù)字：
^\d{n,}$
m-n 位的數(shù)字：
^\d{m,n}$
零和非零開(kāi)頭的數(shù)字：
^(0|[1-9][0-9]*)$
非零開(kāi)頭的最多帶兩位小數(shù)的數(shù)字：
^([1-9][0-9]*)+(\.[0-9]{1,2})?$
帶 1-2 位小數(shù)的正數(shù)或負(fù)數(shù)：
^(\-)?\d+(\.\d{1,2})$
正數(shù)、負(fù)數(shù)、和小數(shù)：
^(\-|\+)?\d+(\.\d+)?$
有兩位小數(shù)的正實(shí)數(shù)：
^[0-9]+(\.[0-9]{2})?$
有 1~3 位小數(shù)的正實(shí)數(shù)：
^[0-9]+(\.[0-9]{1,3})?$
非零的正整數(shù)：
^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的負(fù)整數(shù)：
^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
非負(fù)整數(shù)：
^\d+$ 或 ^[1-9]\d*|0$
非正整數(shù)：
^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非負(fù)浮點(diǎn)數(shù)：
^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮點(diǎn)數(shù)：
^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮點(diǎn)數(shù)：
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
負(fù)浮點(diǎn)數(shù)：
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮點(diǎn)數(shù)：
^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
3.2 校驗(yàn)字符的表達(dá)式
漢字：
^[\u4e00-\u9fa5]{0,}$
英文和數(shù)字：
^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
長(zhǎng)度為 3-20 的所有字符：
^.{3,20}$
由 26 個(gè)英文字母組成的字符串：
^[A-Za-z]+$
由 26 個(gè)大寫(xiě)英文字母組成的字符串：
^[A-Z]+$
由 26 個(gè)小寫(xiě)英文字母組成的字符串：
^[a-z]+$
由數(shù)字和 26 個(gè)英文字母組成的字符串：
^[A-Za-z0-9]+$
由數(shù)字、26 個(gè)英文字母或者下劃線組成的字符串：
^\w+$ 或 ^\w{3,20}$
中文、英文、數(shù)字包括下劃線：
^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、數(shù)字但不包括下劃線等符號(hào)：
^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
可以輸入含有 ^%&',;=?$\" 等特殊字符：
[^%&',;=?$\x22]+
禁止輸入含有 ~ 的字符：
[^~]+
3.3 特殊需求表達(dá)式
郵箱地址：
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
域名：
[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?
網(wǎng)址：
[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
手機(jī)號(hào)碼：
^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$
電話號(hào)碼(“XXX-XXXXXXX”、“XXXX-XXXXXXXX”、“XXX-XXXXXXX”、“XXX-XXXXXXXX”、"XXXXXXX"和"XXXXXXXX)：
^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
國(guó)內(nèi)電話號(hào)碼(0511-4405222、021-87888822)：
\d{3}-\d{8}|\d{4}-\d{7}
電話號(hào)碼正則表達(dá)式（支持手機(jī)號(hào)碼，3-4 位區(qū)號(hào)，7-8 位直播號(hào)碼，1-4 位分機(jī)號(hào)）:
((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)
身份證號(hào)(15 位、18位數(shù)字)，最后一位是校驗(yàn)位，可能為數(shù)字或字符 X：
(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)
帳號(hào)是否合法(字母開(kāi)頭，允許 5-16 字節(jié)，允許字母數(shù)字下劃線)：
^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密碼(以字母開(kāi)頭，長(zhǎng)度在 6~18 之間，只能包含字母、數(shù)字和下劃線)：
^[a-zA-Z]\w{5,17}$
強(qiáng)密碼(必須包含大小寫(xiě)字母和數(shù)字的組合，不能使用特殊字符，長(zhǎng)度在 8-10 之間)：
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$
強(qiáng)密碼(必須包含大小寫(xiě)字母和數(shù)字的組合，可以使用特殊字符，長(zhǎng)度在 8-10 之間)：
^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
日期格式（YYYY-MM-DD）：
^\d{4}-\d{1,2}-\d{1,2}
一年的 12 個(gè)月( 01～09 和 1～12)：
^(0?[1-9]|1[0-2])$
一個(gè)月的 31 天( 01～09 和 1～31)：
^((0?[1-9])|((1|2)[0-9])|30|31)$
xml 文件：
^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
中文字符的正則表達(dá)式：
[\u4e00-\u9fa5]
雙字節(jié)字符：
[^\x00-\xff] (包括漢字在內(nèi)，可以用來(lái)計(jì)算字符串的長(zhǎng)度(一個(gè)雙字節(jié)字符長(zhǎng)度計(jì)2，ASCII字符計(jì)1))
空白行的正則表達(dá)式：
\n\s*\r (可以用來(lái)刪除空白行)
HTML 標(biāo)記的正則表達(dá)式：
<(\S*?)[^>]*>.*?|<.*? /> ( 首尾空白字符的正則表達(dá)式：^\s*|\s*$或(^\s*)|(\s*$) (可以用來(lái)刪除行首行尾的空白字符(包括空格、制表符、換頁(yè)符等等)，非常有用的表達(dá)式)
騰訊 QQ 號(hào)：
[1-9][0-9]{4,} (騰訊QQ號(hào)從10000開(kāi)始)
中國(guó)郵政編碼：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-803744.html
[1-9]\d{5}(?!\d) (中國(guó)郵政編碼為6位數(shù)字)
IPv4 地址：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-803744.html
((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}
到了這里，關(guān)于前端開(kāi)發(fā)必備：掌握正則表達(dá)式，輕松應(yīng)對(duì)復(fù)雜的表單驗(yàn)證的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
