前端系列：正則表達式RegExp詳解

這篇具有很好參考價值的文章主要介紹了前端系列：正則表達式RegExp詳解。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

正則創(chuàng)建

字面量創(chuàng)建

const str = 'asdf123sds3234'
const regexp = /\d+/g
const res = str.match(regexp)
console.log(res) //['123', '3234']

構(gòu)造函數(shù)

const str = 'asdf123asad23121'
const regexp = new RegExp('\\d+', 'g')
const res = str.match(regexp)
console.log(res) // ['123', '23121']

匹配方法

字符串方法
- match:返回一個字符串匹配正則表達式的結(jié)果,如果未找到匹配則為null
```
const str = 'asdf123sds3234'
const regexp = /\d+/g
const res = str.match(regexp)
console.log(res) //['123', '3234']
```
- search:返回正則表達式在字符串中首次匹配項的索引;否則，返回 -1
```
const str = 'as12121es121sd'
const regexp = /\d+/
const res = str.search(regexp)
console.log(res) // 2
```
- replace:返回一個由替換值（replacement）替換部分或所有的模式（pattern）匹配項后的新字符串。模式可以是一個字符串或者一[正則表達式]，替換值可以是一個字符串或者一個每次匹配都要調(diào)用的回調(diào)函數(shù)。如果pattern是字符串，則僅替換第一個匹配項
```
const str = 'asahsashhuihui12332467y7'
const regexp = /(hui)|(123)/g
const res = str.replace(regexp, '*')
console.log(res) //asahsash***32467y7
const res2 = str.replace(regexp, (arg) => {
    return '*'.repeat(arg.length)
})
console.log(res2) //asahsash*********32467y7
```
- split:方法使用指定的分隔符字符串將一個String對象分割成子字符串數(shù)組，以一個指定的分割字串來決定每個拆分的位置
```
const str = 'cccasdfgd9asasdsa12121'
const regexp = /a/
const res = str.split(regexp)
console.log(res) //['ccc', 'sdfgd9', 's', 'sds', '12121']
```

正則對象方法

test:執(zhí)行一個檢索，用來查看正則表達式與指定的字符串是否匹配。返回 true 或 false

let str = 'asdhadhjkhjk12323879789pjdhjfhj'
let regexp = /\d+/
let res = regexp.test(str)
console.log(res) // true
regexp = /m/
res = regexp.test(str)
console.log(res) // false

exec:方法在一個指定字符串中執(zhí)行一個搜索匹配。返回一個結(jié)果數(shù)組或 null

let str = 'sfkdhjk12238jks544jk'
let regexp = new RegExp('\\d+', 'g')
let res = regexp.exec(str)
console.log(res) //['12238', index: 7, input: 'sfkdhjk12238jks544jk', groups: undefined]
res = regexp.exec(str)
console.log(res) //['544', index: 15, input: 'sfkdhjk12238jks544jk', groups: undefined]

元字符

. :匹配默認除(\n,\r,\u2028,\u2029)之外的任何單個字符

const str = 'adad12121dfe234s'
const regexp = /./
const res = str.replace(regexp, '*')
console.log(res) //*dad12121dfe234s

\ :轉(zhuǎn)義符，它有兩層含義
- 表示下一個具有特殊含義的字符為字面值
- 表示下一個字符具有特殊含義（轉(zhuǎn)義后的結(jié)果是元字符內(nèi)約定的）
```
const str = 'sdsds/dfdfd12121'
const regexp = /\/d/
const res = regexp.test(str)
console.log(res) //true
```

\d :匹配任意一個阿拉伯數(shù)字的字符

const str = 'xsdsd3121xcxx12121cx'
const regexp = /\d+/
const res = regexp.exec(str)
console.log(res) //['3121', index: 5, input: 'xsdsd3121xcxx12121cx', groups: undefined]

\D :匹配任意一個非阿拉伯數(shù)字的字符

const str = 'xsdsd3121xcxx12121cx'
const regexp = /\D+/
const res = regexp.exec(str)
console.log(res) //['xsdsd', index: 0, input: 'xsdsd3121xcxx12121cx', groups: undefined]

\w :匹配任意一個（字母、數(shù)字、下劃線）的字符

const str = '@qwqwq_asas12121df0df0l;ll'
const regexp = /\w+/g
const res = str.match(regexp)
console.log(res) //['qwqwq_asas12121df0df0l', 'll']

\W :匹配任意一個非（字母、數(shù)字、下劃線）的字符

const str = '@qwqwq_asas12121df0df0l;ll'
const regexp = /\W+/g
const res = str.match(regexp)
console.log(res) //['@', ';']

\s :匹配一個空白符，包括空格、制表符、換頁符、換行符和其他的Unicode 空格

const str = 'sdhjk\n\rsdsd\n'
const regexp = /\s+/g
const res = str.replace(regexp, '-')
console.log(res) //sdhjk-sdsd-

\S :匹配一個非空白符

const str = 'sdhjk\n\rsdsd\n'
const regexp = /\S+/g
const res = str.match(regexp)
console.log(res) //['sdhjk', 'sdsd']

\t :匹配一個水平制表符（horizontal tab）

const str = 'sdhjk\tsdsd'
const regexp = /\t/
const res = regexp.test(str)
console.log(res) //true

\r :匹配一個回車符（carriage return）

const str = 'sdhjk\rsdsd'
const regexp = /\r/
const res = regexp.test(str)
console.log(res) //true

\n :匹配一個換行符（linefeed）

const str = 'sdhjk\nsdsd'
const regexp = /\n/
const res = regexp.test(str)
console.log(res) //true

\v :匹配一個垂直制表符（vertical tab）

const str = 'sdhjk\vsdsd'
const regexp = /\v/
const res = regexp.test(str)
console.log(res) //true

\f :匹配一個換頁符（form-feed）

const str = 'sdhjk\fsdsd'
const regexp = /\f/
const res = regexp.test(str)
console.log(res) //true

字符集合

[xyz] :一個字符集合。匹配方括號中的任意字符，包括轉(zhuǎn)義序列。你可以使用破折號（-）來指定一個字符范圍。對于點（.）和星號（*）這樣的特殊符號在一個字符集中沒有特殊的意義。他們不必進行轉(zhuǎn)義，不過轉(zhuǎn)義也是起作用的
```
const str = 'dfgd12312df57676ds'
const regexp = /[1-9]+/g
const res = str.match(regexp)
console.log(res) //['12312', '57676']
```
[^xyz] :一個反向字符集。也就是說，它匹配任何沒有包含在方括號中的字符。你可以使用破折號（-）來指定一個字符范圍。任何普通字符在這里都是起作用的
```
const str = 'dfgd12312df57676ds'
const regexp = /[^1-9]+/g
const res = str.match(regexp)
console.log(res) //['dfgd', 'df', 'ds']
```

[\b] :匹配一個退格(backspace)。（不要和\b 混淆了。）

const str = `dfgd12312df\b57676ds`
const regexp = /[\b]/g
const res = str.match(regexp)
console.log(res) //['\b']

邊界

^ :匹配輸入的開始。如果多行標志被設置為 true，那么也匹配換行符后緊跟的位置

const str = `sds234fsd\nsd4345ds\nsqwq`
const regexp = /^sd.*/gm
const res = str.match(regexp)
console.log(res) //['sds234fsd', 'sd4345ds']

$ :匹配輸入的結(jié)束。如果多行標志被設置為 true，那么也匹配換行符前的位置

const str = `sds234fsd\nsd4345ds\nsqwq`
const regexp = /^sd.*d$/gm
const res = str.match(regexp)
console.log(res) //['sds234fsd']

\b :匹配一個詞的邊界。一個詞的邊界就是一個詞不被另外一個“字”字符跟隨的位置或者前面跟其他“字”字符的位置，例如在字母和空格之間。注意，匹配中不包括匹配的字邊界。換句話說，一個匹配的詞的邊界的內(nèi)容的長度是 0。（不要和[\b]混淆了）
```
const str = `this is dog`
const regexp = /\bi/
const res = str.match(regexp)
console.log(res) //['i', index: 5, input: 'this is dog', groups: undefined]
```

\B :匹配一個非單詞邊界

const str = `this is dog`
const regexp = /[a-z]+\Bi[a-z]+/
const res = str.match(regexp)
console.log(res) //['this', index: 0, input: 'this is dog', groups: undefined]

分組

() :對表達式進行分組，類似數(shù)學中的分組，也稱為子項

索引分組:(x)

const str = 'asabvb\r121ghjsdhj sdsds'
const regexp = /(\w+)\r(\w+)/
const res = str.match(regexp)
console.log(res) //['asabvb\r121ghjsdhj', 'asabvb', '121ghjsdhj', index: 0, input: 'asabvb\r121ghjsdhj sdsds', groups: undefined]

命名分組:(?),groups 屬性

const str = 'asabvb\r121ghjsdhj sdsds'
const regexp = /(?<str>\w+)\r(\w+)/
const res = str.match(regexp)
console.log(res) //['asabvb\r121ghjsdhj', 'asabvb', '121ghjsdhj', index: 0, input: 'asabvb\r121ghjsdhj sdsds', groups: {str: 'asabvb'}]

捕獲匹配:(x)

const str = 'this is dog'
const regexp = /(this)/
const res = str.match(regexp)
console.log(RegExp.$1) //this
console.log(res) //['this', index: 0, input: 'this is dog', groups: undefined]

非捕獲匹配:(?:x)

//簡而言之就是不捕獲文本 ，也不針對組合計進行計數(shù)
const str = 'this is dog'
const regexp = /(?:this)/
const res = str.match(regexp)
console.log(RegExp.$1) //''
console.log(res) //['this', index: 0, input: 'this is dog', groups: undefined]

斷言/預查

正向肯定斷言:x(?=y)

const str = 'iphone8iphone11iphoneNumber'
const regexp = /iphone(?=\d{1,2})/g
const res = str.replace(regexp, '蘋果')
console.log(res) //蘋果8蘋果11iphoneNumber

正向否定斷言:x(?!y)

const str = 'iphone8iphone11iphoneNumber'
const regexp = /iphone(?!\d{1,2})/g
const res = str.replace(regexp, '蘋果')
console.log(res) //iphone8iphone11蘋果Number

負向肯定斷言

const str = '10px20px30pxxpx'
const regexp = /(?<=\d{2})px/g
const res = str.replace(regexp, '像素')
console.log(res) //10像素20像素30像素xpx

負向否定斷言

const str = '10px20px30pxxpx'
const regexp = /(?<!\d{2})px/g
const res = str.replace(regexp, '像素')
console.log(res) //10px20px30pxx像素

數(shù)量詞匯

x{n} :n 是一個正整數(shù)，前面的模式 x 連續(xù)出現(xiàn) n 次時匹配

let str = '123ab_cd123'
let regexp = /[a-z]{3}/g
let res = str.replace(regexp, '*')
console.log(res) //123ab_cd123
regexp = /[a-z]{2}/g
res = str.replace(regexp, '*')
console.log(res) //123*_*123

x{n,m} :n 和 m 為正整數(shù)，前面的模式 x 連續(xù)出現(xiàn)至少 n 次，至多 m 次時匹配

let str = '123ab_cd123'
let regexp = /[a-z]{1,2}/g
let res = str.replace(regexp, '*')
console.log(res) //123*_*123
regexp = /[a-z]{1,1}/g
res = str.replace(regexp, '*')
console.log(res) //123**_**123

x{n,} :n 是一個正整數(shù)，前面的的模式 x 連續(xù)出現(xiàn)至少 n 次時匹配

let str = '123abwasdsd_123'
let regexp = /[a-z]{1,}/g
let res = str.replace(regexp, '*')
console.log(res) //123*_123

x* :匹配前面的模式 x 0 次或多次，等價于 {0,}

let str = '123abwasdsd_123'
let regexp = /123*/g
let res = str.replace(regexp, '*')
console.log(res) //*abwasdsd_*

x+ :匹配前面的模式 x 1 次或多次,等價于 {1,}

let str = '123abwasdsd_123'
let regexp = /123+/g
let res = str.replace(regexp, '*')
console.log(res) //*abwasdsd_*

x? :匹配前面的模式 x 0 次或 1 次,等價于 {0,1}

let str = '123abwasdsd_123'
let regexp = /d_123?/g
let res = str.replace(regexp, '*')
console.log(res) //123abwasds*

x|y :匹配 x 或 y

let str = '123abwasdsd_123'
let regexp = /[A-Z]|[a-z]+/g
let res = str.replace(regexp, '*')
console.log(res) //123*_123

匹配模式

g:全局搜索

let str = '123abwasdsd_123'
let regexp = /\d+/
let res = str.replace(regexp, '*')
console.log(res) //*abwasdsd_123
regexp = /\d+/g
console.log(regexp.global) // true
res = str.replace(regexp, '*')
console.log(res) //*abwasdsd_*

i:不區(qū)分大小寫搜

let str = '123abCasdsd_123'
let regexp = /[a-z]+/g
let res = str.replace(regexp, '*')
console.log(res) //123*C*_123
regexp = /[a-z]+/gi
console.log(regexp.ignoreCase) // true
res = str.replace(regexp, '*')
console.log(res) //123*_123

m:多行搜索

let str = `abas
asds`
let regexp = /^\w+/gm
console.log(regexp.multiline) // true
let res = str.replace(regexp, '*')
console.log(res) //* *

s:允許 .匹配換行符

let str = `<div>hello world
            </div>`
let regexp = /<div>.*<\/div>/gs
console.log(regexp.dotAll)
let res = regexp.test(str)
console.log(res) //true

u:使用 unicode 碼的模式進行匹配

console.log(/^.$/.test('\uD842\uDFB7')) //false
console.log(/^.$/u.test('\uD842\uDFB7')) //true
console.log(/^.$/u.unicode) // true

y:執(zhí)行“粘性(sticky)”搜索,匹配從目標字符串的當前位置開始文章來源地址http://www.zghlxwxcb.cn/news/detail-785782.html

const str = '121278789s834234dsssdf'
const regexp = /\d+/gy
console.log(regexp.sticky)
console.log(regexp.exec(str)) // ['121278789', index: 0, input: '121278789s834234dsssdf', groups: undefined]
console.log(regexp.exec(str)) // null

RegExp 方法特性

;/a/[Symbol.match]('abc')
;/a/[Symbol.matchAll]('abc')
;/a/[Symbol.replace]('abc', 'A')
;/a/[Symbol.search]('abc')
;/-/[Symbol.split]('a-b-c')
const str = 'asfs1212343sdsds12asa'
let regexp = /\d+/g
regexp.exec(str)
console.log(RegExp.input) //asfs1212343sdsds12asa
console.log(RegExp.$_) //asfs1212343sdsds12asa
console.log(regexp.lastIndex) //11
console.log(RegExp.lastMatch) //1212343
console.log(RegExp['$&']) //1212343
console.log(RegExp.leftContext) //asfs
console.log(RegExp['$`']) //asfs
console.log(RegExp.rightContext) //sdsds12asa
console.log(RegExp["$'"]) //sdsds12asa
regexp = /(\d+)([a-z]+)/g
const res = str.replace(regexp, '$1')
console.log(RegExp.$1) //12
console.log(RegExp.$2) //asa