前端使用正則表達(dá)式進(jìn)行校驗的方法總結(jié)大全
一、定義
設(shè)計思想是用一種描述性的語言定義一個規(guī)則,凡是符合規(guī)則的字符串,我們就認(rèn)為它“匹配”了,否則,該字符串就是不合法的。
在 JavaScript
中,正則表達(dá)式也是對象,構(gòu)建正則表達(dá)式有兩種方式:
1、字面量創(chuàng)建,其由包含在斜杠之間的模式組成
2、調(diào)用RegExp對象的構(gòu)造函數(shù)
二、匹配規(guī)則
常見的校驗規(guī)則如下:
規(guī)則 | 描述 |
---|---|
\ | 轉(zhuǎn)義 |
^ | 匹配輸入的開始 |
$ | 匹配輸入的結(jié)束 |
* | 匹配前一個表達(dá)式 0 次或多次 |
+ | 匹配前面一個表達(dá)式 1 次或者多次。等價于 {1,} |
? | 匹配前面一個表達(dá)式 0 次或者 1 次。等價于{0,1} |
. | 默認(rèn)匹配除換行符之外的任何單個字符 |
x(?=y) | 匹配'x'僅僅當(dāng)'x'后面跟著'y'。這種叫做先行斷言 |
(?<=y)x | 匹配'x'僅當(dāng)'x'前面是'y'.這種叫做后行斷言 |
x(?!y) | 僅僅當(dāng)'x'后面不跟著'y'時匹配'x',這被稱為正向否定查找 |
(?<!y)x | 僅僅當(dāng)'x'前面不是'y'時匹配'x',這被稱為反向否定查找 |
x|y | 匹配‘x’或者‘y’ |
{n} | n 是一個正整數(shù),匹配了前面一個字符剛好出現(xiàn)了 n 次 |
{n,} | n是一個正整數(shù),匹配前一個字符至少出現(xiàn)了n次 |
{n,m} | n 和 m 都是整數(shù)。匹配前面的字符至少n次,最多m次 |
[xyz] | 一個字符集合。匹配方括號中的任意字符 |
[^xyz] | 匹配任何沒有包含在方括號中的字符 |
\b | 匹配一個詞的邊界,例如在字母和空格之間 |
\B | 匹配一個非單詞邊界 |
\d | 匹配一個數(shù)字 |
\D | 匹配一個非數(shù)字字符 |
\f | 匹配一個換頁符 |
\n | 匹配一個換行符 |
\r | 匹配一個回車符 |
\s | 匹配一個空白字符,包括空格、制表符、換頁符和換行符 |
\S | 匹配一個非空白字符 |
\w | 匹配一個單字字符(字母、數(shù)字或者下劃線) |
\W | 匹配一個非單字字符 |
正則表達(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 | 一個在字符串中執(zhí)行查找匹配的RegExp方法,它返回一個數(shù)組(未匹配到則返回 null)。 |
test | 一個在字符串中測試是否匹配的RegExp方法,它返回 true 或 false。 |
match | 一個在字符串中執(zhí)行查找匹配的String方法,它返回一個數(shù)組,在未匹配到時會返回 null。 |
matchAll | 一個在字符串中執(zhí)行查找所有匹配的String方法,它返回一個迭代器(iterator)。 |
search | 一個在字符串中測試匹配的String方法,它返回匹配到的位置索引,或者在失敗時返回-1。 |
replace | 一個在字符串中執(zhí)行查找匹配的String方法,并且使用替換字符串替換掉匹配到的子字符串。 |
split | 一個使用正則表達(dá)式或者一個固定字符串分隔一個字符串,并將分隔后的子字符串存儲到數(shù)組中的 String 方法。 |
str.match(regexp)
str.match(regexp)
方法在字符串 str
中找到匹配 regexp
的字符
如果 regexp
不帶有 g
標(biāo)記,則它以數(shù)組的形式返回第一個匹配項,其中包含分組和屬性 index
(匹配項的位置)、input
(輸入字符串,等于 str
)
如果 regexp
帶有 g
標(biāo)記,則它將所有匹配項的數(shù)組作為字符串返回,而不包含分組和其他詳細(xì)信息
如果沒有匹配項,則無論是否帶有標(biāo)記 g
,都將返回 null
str.matchAll(regexp)
返回一個包含所有匹配正則表達(dá)式的結(jié)果及分組捕獲組的迭代器
str.search(regexp)
返回第一個匹配項的位置,如果未找到,則返回 -1,
這里需要注意的是,search
僅查找第一個匹配項
str.replace(regexp)
替換與正則表達(dá)式匹配的子串,并返回替換后的字符串。在不設(shè)置全局匹配g
的時候,只替換第一個匹配成功的字符串片段
str.split(regexp)
使用正則表達(dá)式(或子字符串)作為分隔符來分割字符串
regexp.exec(str)
regexp.exec(str)
方法返回字符串 str
中的 regexp
匹配項,與以前的方法不同,它是在正則表達(dá)式而不是字符串上調(diào)用的,根據(jù)正則表達(dá)式是否帶有標(biāo)志 g
,它的行為有所不同
如果沒有 g
,那么 regexp.exec(str)
返回的第一個匹配與 str.match(regexp)
完全相同
如果有標(biāo)記 g
,調(diào)用 regexp.exec(str)
會返回第一個匹配項,并將緊隨其后的位置保存在屬性regexp.lastIndex
中。 下一次同樣的調(diào)用會從位置 regexp.lastIndex
開始搜索,返回下一個匹配項,并將其后的位置保存在 regexp.lastIndex
中
regexp.test(str)
查找匹配項,然后返回 true/false
表示是否存在
附:斷言例子
?=匹配一個字符串,該字符串后面跟著一個特定的子字符串:
/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í)行逆操作,匹配一個字符串,該字符串后面沒有一個特定的子字符串:
/Roger(?!Waters)/ /Roger(?! Waters)/.test('Roger is my dog') //true /Roger(?! Waters)/.test('Roger Waters is a famous musician') //false
先行斷言(lookahead)使用 ?=
符號。它們已經(jīng)可用了。
后行斷言(lookbehind),是一個新功能,使用 ?< =
。
/(?<=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)行校驗的文章就介紹到這了,更多相關(guān)前端正則表達(dá)式校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue elementUI實現(xiàn)免密登陸與號碼綁定功能
這篇文章主要介紹了Vue elementUI實現(xiàn)免密登陸與號碼綁定功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11微信小程序全局變量改變監(jiān)聽的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于微信小程序全局變量改變監(jiān)聽的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07教你巧用?import.meta?實現(xiàn)熱更新的問題
import.meta?是一個給?JavaScript?模塊暴露特定上下文的元數(shù)據(jù)屬性的對象,它包含了這個模塊的信息,這篇文章主要介紹了巧用?import.meta?實現(xiàn)熱更新的問題,需要的朋友可以參考下2022-04-04