前端使用正則表達(dá)式進(jìn)行校驗(yàn)的方法總結(jié)大全
一、定義
設(shè)計(jì)思想是用一種描述性的語言定義一個(gè)規(guī)則,凡是符合規(guī)則的字符串,我們就認(rèn)為它“匹配”了,否則,該字符串就是不合法的。
在 JavaScript中,正則表達(dá)式也是對象,構(gòu)建正則表達(dá)式有兩種方式:
1、字面量創(chuàng)建,其由包含在斜杠之間的模式組成

2、調(diào)用RegExp對象的構(gòu)造函數(shù)

二、匹配規(guī)則
常見的校驗(yàn)規(guī)則如下:
| 規(guī)則 | 描述 |
|---|---|
| \ | 轉(zhuǎn)義 |
| ^ | 匹配輸入的開始 |
| $ | 匹配輸入的結(jié)束 |
| * | 匹配前一個(gè)表達(dá)式 0 次或多次 |
| + | 匹配前面一個(gè)表達(dá)式 1 次或者多次。等價(jià)于 {1,} |
| ? | 匹配前面一個(gè)表達(dá)式 0 次或者 1 次。等價(jià)于{0,1} |
| . | 默認(rèn)匹配除換行符之外的任何單個(gè)字符 |
| x(?=y) | 匹配'x'僅僅當(dāng)'x'后面跟著'y'。這種叫做先行斷言 |
| (?<=y)x | 匹配'x'僅當(dāng)'x'前面是'y'.這種叫做后行斷言 |
| x(?!y) | 僅僅當(dāng)'x'后面不跟著'y'時(shí)匹配'x',這被稱為正向否定查找 |
| (?<!y)x | 僅僅當(dāng)'x'前面不是'y'時(shí)匹配'x',這被稱為反向否定查找 |
| x|y | 匹配‘x’或者‘y’ |
| {n} | n 是一個(gè)正整數(shù),匹配了前面一個(gè)字符剛好出現(xiàn)了 n 次 |
| {n,} | n是一個(gè)正整數(shù),匹配前一個(gè)字符至少出現(xiàn)了n次 |
| {n,m} | n 和 m 都是整數(shù)。匹配前面的字符至少n次,最多m次 |
| [xyz] | 一個(gè)字符集合。匹配方括號中的任意字符 |
| [^xyz] | 匹配任何沒有包含在方括號中的字符 |
| \b | 匹配一個(gè)詞的邊界,例如在字母和空格之間 |
| \B | 匹配一個(gè)非單詞邊界 |
| \d | 匹配一個(gè)數(shù)字 |
| \D | 匹配一個(gè)非數(shù)字字符 |
| \f | 匹配一個(gè)換頁符 |
| \n | 匹配一個(gè)換行符 |
| \r | 匹配一個(gè)回車符 |
| \s | 匹配一個(gè)空白字符,包括空格、制表符、換頁符和換行符 |
| \S | 匹配一個(gè)非空白字符 |
| \w | 匹配一個(gè)單字字符(字母、數(shù)字或者下劃線) |
| \W | 匹配一個(gè)非單字字符 |
正則表達(dá)式標(biāo)記
| 標(biāo)志 | 描述 |
|---|---|
g | 全局搜索。 |
i | 不區(qū)分大小寫搜索。 |
m | 多行搜索。 |
s | 允許 . 匹配換行符。 |
u | 使用unicode碼的模式進(jìn)行匹配。 |
y | 執(zhí)行“粘性(sticky)”搜索,匹配從目標(biāo)字符串的當(dāng)前位置開始。 |
三、匹配方法
正則表達(dá)式常被用于某些方法,我們可以分成兩類:
- 字符串(str)方法:
match、matchAll、search、replace、split - 正則對象下(regexp)的方法:
test、exec
| 方法 | 描述 |
|---|---|
| exec | 一個(gè)在字符串中執(zhí)行查找匹配的RegExp方法,它返回一個(gè)數(shù)組(未匹配到則返回 null)。 |
| test | 一個(gè)在字符串中測試是否匹配的RegExp方法,它返回 true 或 false。 |
| match | 一個(gè)在字符串中執(zhí)行查找匹配的String方法,它返回一個(gè)數(shù)組,在未匹配到時(shí)會返回 null。 |
| matchAll | 一個(gè)在字符串中執(zhí)行查找所有匹配的String方法,它返回一個(gè)迭代器(iterator)。 |
| search | 一個(gè)在字符串中測試匹配的String方法,它返回匹配到的位置索引,或者在失敗時(shí)返回-1。 |
| replace | 一個(gè)在字符串中執(zhí)行查找匹配的String方法,并且使用替換字符串替換掉匹配到的子字符串。 |
| split | 一個(gè)使用正則表達(dá)式或者一個(gè)固定字符串分隔一個(gè)字符串,并將分隔后的子字符串存儲到數(shù)組中的 String 方法。 |
str.match(regexp)
str.match(regexp) 方法在字符串 str 中找到匹配 regexp 的字符
如果 regexp 不帶有 g 標(biāo)記,則它以數(shù)組的形式返回第一個(gè)匹配項(xiàng),其中包含分組和屬性 index(匹配項(xiàng)的位置)、input(輸入字符串,等于 str)

如果 regexp 帶有 g 標(biāo)記,則它將所有匹配項(xiàng)的數(shù)組作為字符串返回,而不包含分組和其他詳細(xì)信息

如果沒有匹配項(xiàng),則無論是否帶有標(biāo)記 g ,都將返回 null

str.matchAll(regexp)
返回一個(gè)包含所有匹配正則表達(dá)式的結(jié)果及分組捕獲組的迭代器

str.search(regexp)
返回第一個(gè)匹配項(xiàng)的位置,如果未找到,則返回 -1,這里需要注意的是,search 僅查找第一個(gè)匹配項(xiàng)

str.replace(regexp)
替換與正則表達(dá)式匹配的子串,并返回替換后的字符串。在不設(shè)置全局匹配g的時(shí)候,只替換第一個(gè)匹配成功的字符串片段

str.split(regexp)
使用正則表達(dá)式(或子字符串)作為分隔符來分割字符串

regexp.exec(str)
regexp.exec(str) 方法返回字符串 str 中的 regexp 匹配項(xiàng),與以前的方法不同,它是在正則表達(dá)式而不是字符串上調(diào)用的,根據(jù)正則表達(dá)式是否帶有標(biāo)志 g,它的行為有所不同
如果沒有 g,那么 regexp.exec(str) 返回的第一個(gè)匹配與 str.match(regexp) 完全相同
如果有標(biāo)記 g,調(diào)用 regexp.exec(str) 會返回第一個(gè)匹配項(xiàng),并將緊隨其后的位置保存在屬性regexp.lastIndex 中。 下一次同樣的調(diào)用會從位置 regexp.lastIndex 開始搜索,返回下一個(gè)匹配項(xiàng),并將其后的位置保存在 regexp.lastIndex 中

regexp.test(str)
查找匹配項(xiàng),然后返回 true/false 表示是否存在

附:斷言例子
?=匹配一個(gè)字符串,該字符串后面跟著一個(gè)特定的子字符串:
/Roger(?=Waters)/
/Roger(?= Waters)/.test('Roger is my dog') //false
/Roger(?= Waters)/.test('Roger is my dog and Roger Waters is a famous musician') //true?! 執(zhí)行逆操作,匹配一個(gè)字符串,該字符串后面沒有一個(gè)特定的子字符串:
/Roger(?!Waters)/
/Roger(?! Waters)/.test('Roger is my dog') //true
/Roger(?! Waters)/.test('Roger Waters is a famous musician') //false先行斷言(lookahead)使用 ?= 符號。它們已經(jīng)可用了。
后行斷言(lookbehind),是一個(gè)新功能,使用 ?< =。
/(?<=Roger) Waters/
/(?<=Roger) Waters/.test('Pink Waters is my dog') //false
/(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //true后行斷言(lookbehind) 逆操作,使用 ?<!。
/(?<!Roger) Waters/
/(?<!Roger) Waters/.test('Pink Waters is my dog') //true
/(?<!Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //false總結(jié)
到此這篇關(guān)于前端使用正則表達(dá)式進(jìn)行校驗(yàn)的文章就介紹到這了,更多相關(guān)前端正則表達(dá)式校驗(yàn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js+css3實(shí)現(xiàn)簡單時(shí)鐘特效
這篇文章主要為大家詳細(xì)介紹了js+css3實(shí)現(xiàn)簡單時(shí)鐘特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
Vue elementUI實(shí)現(xiàn)免密登陸與號碼綁定功能
這篇文章主要介紹了Vue elementUI實(shí)現(xiàn)免密登陸與號碼綁定功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
微信小程序全局變量改變監(jiān)聽的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于微信小程序全局變量改變監(jiān)聽的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
JavaScript實(shí)現(xiàn)京東快遞單號查詢
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)京東快遞單號查詢,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11
教你巧用?import.meta?實(shí)現(xiàn)熱更新的問題
import.meta?是一個(gè)給?JavaScript?模塊暴露特定上下文的元數(shù)據(jù)屬性的對象,它包含了這個(gè)模塊的信息,這篇文章主要介紹了巧用?import.meta?實(shí)現(xiàn)熱更新的問題,需要的朋友可以參考下2022-04-04

