正則表達(dá)式
概念
- 正則表達(dá)式是對(duì)字符串操作的一種邏輯公式，就是用事先定義好的一些特定字符恒序、及這些特定字符的組合瘦麸，組成一個(gè)“規(guī)則字符串”，這個(gè)“規(guī)則字符串”用來表達(dá)對(duì)字符串的一種過濾邏輯
目的
- 給定的字符串是否符合正則表達(dá)式的過濾邏輯（稱作“匹配”）：
- 可以通過正則表達(dá)式歧胁，從字符串中獲取我們想要的特定部分滋饲。
正則表達(dá)式在前端的應(yīng)用場(chǎng)景
- 表單驗(yàn)證
- 驗(yàn)證手機(jī)號(hào)
- 驗(yàn)證郵箱
- 驗(yàn)證車牌號(hào)
- 其中的一些符號(hào) 可實(shí)現(xiàn)對(duì)字符串的高效操作
js中正則的創(chuàng)建
- 字面量形式
var expression = /pattern/flags
// eg.
var p = /acc/g
- 構(gòu)造函數(shù)法
var p1 = new RegExp('alex', 'g')
正則驗(yàn)證網(wǎng)站
元字符
- 匹配所有字符
/./
- 匹配數(shù)字 字母和下劃線
\w 匹配數(shù)字 字母 下劃線 等價(jià) [A-Za-z0-9_]
\W 取非
- 匹配數(shù)字
\d 匹配數(shù)字
\D 取非
- 匹配空白字符
\s 匹配空白字符
\S 取非
- [] 匹配區(qū)間的任意字符
1. [a-zA-Z0-9] // 匹配大小寫字母和數(shù)字
2. [\u4e00-\u9fa5] // 匹配所有中文
3. [^a-zA-Z0-9] // ^用在[ ] 中就是取非的意思
- 重復(fù)匹配 + (匹配一次或者多次)
\mj+\g
mj
mjjj
\[mM][jJ]+\g
mj
mjj
MJ
MJJ
MjJJJ
- +匹配1次或多次@
- *匹配0次或者多次
- ?匹配0次或者1次(可有可無)
- () 分組匹配
- ?: 不捕獲(在分組中使用)
分組匹配
/(http|https):\/{2}w{3}.[a-z]+.(com|cn)/g
https://www.baidu.com
http://www.google.com
http://www.mi.cn
https://www.ape.com
分組后 用tools 可以獲取
RegExp.$1
https
http
http
https
RegExp.$2
com
com
cn
com
// 不捕獲 (?:http|https)
RegExp.$1
com
com
cn
com
```js
const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;
const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31
// 具名組匹配
const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31
正向預(yù)查(數(shù)字后要跟著'元' 但是'元'不包括)
/\d+(?=元)/g
200元 // 匹配200
2000元 // 匹配2000
200刀 // 不匹配
2000磅 // 不匹配
// 否定(數(shù)字后不能跟'元', 且這個(gè)'元'不包括)
/\d+(?!元)/g
200元 // 匹配20
2000元 // 匹配200
200刀 // 匹配200
2000磅 // 匹配2000
反向預(yù)查 ('元'開頭 但是'元'不包括)
/(?<=元)\d/g
元200 // 匹配200
元2000 // 匹配2000
刀200 // 不匹配
磅2000 // 不匹配
// 否定 = 換成 !
重復(fù)類
/\d{4, 8}/g
// 最多8 最少4
/\d{4}/g
// 匹配4個(gè)
正則實(shí)例對(duì)象的一些方法
- .test() 返回一個(gè) boolean
var p = /acc/g
var str = 'acc'
p.test(str) // true, false
'''
- .exec() 返回匹配的結(jié)果 返回一個(gè)數(shù)組 沒有的話 返回 null
```js
RegExpObject.exec(string)
字符串的方法
- match()
對(duì)字符串進(jìn)行正則匹配 返回匹配的結(jié)果
var str = 'hello world'
undefined
str.match(/l/)
=>> ["l", index: 2, input: "hello world", groups: undefined]
str.match(/l/g)
=>>["l", "l", "l"]
str.match(/a/g)
=>>null
- search()
返回第一個(gè)滿足條件的匹配結(jié)果在整個(gè)字符串中的位置 , 如果沒有任何匹配, 返回 -1
var str = 'hello world'
undefined
str.search(/l/)
=>> 2
str.search(/llo/)
=>> 2
str.match(/l/g)
=>>2
str.match(/a/)
=>>-1
- replace(regexp/substr,replacement)
可以替換匹配的值, 它接受兩個(gè)參數(shù),- 第一參數(shù)是正則表達(dá)式或字符串(表示搜索模式),
- 第二個(gè)是匹配的內(nèi)容 一個(gè)字符串值。替換文本的函數(shù)(要有return)
- 在這種情況下喊巍，每個(gè)匹配都調(diào)用該函數(shù)屠缭，它返回的字符串將作為替換文本使用。該函數(shù)的第一個(gè)參數(shù)是匹配模式的字符串崭参。接下來的參數(shù)是與模式中的子表達(dá)式匹配的字符串呵曹，可以有 0 個(gè)或多個(gè)這樣的參數(shù)。接下來的參數(shù)是一個(gè)整數(shù)，聲明了匹配在 stringObject 中出現(xiàn)的位置奄喂。最后一個(gè)參數(shù)是 stringObject 本身铐殃。
'2019.10.05'.replace(/\./g, '-')
=>> '2019-10-05'
let data = {
name: '小明',
message: '消息'
}
let str = "<p>{{name}}-{{message}}</p>"
let exp = /\{\{(.+?)(\})\}/g
let result = str.replace(exp, (a, $1, $2, index, strObj) => {
// 根據(jù) str 的特征 此回調(diào)調(diào)用兩次 注意 $1, $2 .... 和 正則的分組要一致
console.log(a) // {{name}} {{message}}
console.log($1) // name message
console.log($2) // } }
console.log(index) // 3 12
console.log(strObj) // "<p>{{name}}-{{message}}</p>" "<p>{{name}}-{{message}}</p>"
return data[$1] // 返回值就是要替換的
})
console.log(str) // <p>{{name}}-{{message}}</p>
console.log(result) // <p>小明-消息</p>
實(shí)際應(yīng)用
檢查用戶賬號(hào)
- 規(guī)則:
- 由數(shù)字,字母,下劃線組成
- 字母開頭
- 長(zhǎng)度 4-16位
/^[a-zA-Z]\w{3,15}$/
匹配手機(jī)號(hào)
- 規(guī)則
- 1開頭
- 第二位是 34578
- 其他9位是 0-9 并結(jié)尾
/^1[3|4|5|7|8][0-9]{9}$/
驗(yàn)證電話號(hào)
- 規(guī)則:
- 0開頭
- 拼接 2或3位數(shù)字
- 拼接 - 可有可無
- 拼接 7或8位數(shù)字
- 01088888888 010-7777777 0375-7777777 03757777777
/^0\d{2,3}-?\d{7,8}$/g
匹配身份證號(hào)
- 規(guī)則:
- 15或者18位
- 15位全是數(shù)字
- 18位 前17是數(shù)字 最后一位 [0-9|x|X]
/(^\d{15}$)|(^\d{18}$)|(^[0-9]{17}[\d|x|X])/
匹配郵箱
- 規(guī)則
- 第一部分@ 第二部分.com|cn|net
/[a-zA-Z0-9_.-]+@[a-zA-Z0-9_.-]+\.(com|cn|net)$/
