什么是正則
正則就是一種規(guī)則的的表達(dá)式,書寫一段規(guī)則,用于匹配一段字符串是否符合規(guī)則
創(chuàng)建正則表達(dá)式
創(chuàng)建正則表達(dá)式有兩種方式:
1.字面量的形式
2.內(nèi)置構(gòu)造函數(shù)的形式
<script>
*1.字面量的形式
const reg = /abc/
*2.內(nèi)置構(gòu)造函數(shù)的形式
const reg1 = new RegExp('abc')
console.log(reg) // /abc/
console.log(reg1) // /abc/
</script>
正則的常用方法
1.匹配(test)
匹配字符串是否符合正則規(guī)則
符合—>true
不符合—>false
語法: 正則.test(字符串)
2.捕獲
語法:正則.exec(字符串)
正則的元字符
正則的表達(dá)式的符號(hào)由哪些組成?
1.元字符
正則表達(dá)式的規(guī)則符號(hào)
2.修飾符
修飾整個(gè)正則表達(dá)式的符號(hào)
普通元字符
1.\d ------ 表示一位(一個(gè))數(shù)字(0~9)
2. \D ------ 表示 一位 非數(shù)字(除了0~9)
3. \w ------ 表示 數(shù)字(0~9)字母(a-zA-Z)下劃線(_) 其中的 一個(gè)
4. \W ------ 表示 除了 數(shù)字(0~9)字母(a-zA-Z)下劃線 這些的某一個(gè)字符
5. \s ------ 表示 一位 空白字符
6. \S ------ 表示 一位 非空白字符
7. . ------ 表示 一位 非換行的任意字符
8. \ ------ 表示轉(zhuǎn)義符
有意義的符號(hào), 轉(zhuǎn)為沒有意義的文本
沒有意義的文本, 轉(zhuǎn)為有意義的符號(hào)
<script>
const reg = /\d/ // 表示字符串中 至少包含一個(gè) 數(shù)字(0~9)
console.log(reg.test('qwertyuiop')) // false
console.log(reg.test('!@#$%^&*')) // false
console.log(reg.test('1000')) // true
const reg1 = /\D/ // 表示字符串中 至少出現(xiàn)一個(gè) 非數(shù)字的內(nèi)容
console.log(reg1.test('qwertyuiop')) // true
console.log(reg1.test('!@#$%^&*')) // true
console.log(reg1.test('1000')) // false
const reg = /\w/ // 表示字符串中 至少包含一個(gè) 數(shù)字(0~9)字母(a-zA-Z)下劃線(_) 其中的 一個(gè)
console.log(reg.test('@#$%^&*')) // false
console.log(reg.test('@#$%_^&*')) // true
console.log(reg.test('y@#$%^&*')) // true
console.log(reg.test('6@#$%^&*')) // true
console.log(reg.test('abc_123')) // true
const reg1 = /\W/ //表示 字符串中 至少出現(xiàn)一個(gè) 數(shù)字(0~9)字母(a-zA-Z)下劃線(_) 以外的 字符
console.log(reg1.test('@#$%^&*')) // true
console.log(reg1.test('@#$%_^&*')) // true
console.log(reg1.test('y@#$%^&*')) // true
console.log(reg1.test('6@#$%^&*')) // true
console.log(reg1.test('abc_123')) // false
const reg = /\s/ // 表示字符串中 至少出現(xiàn)一個(gè) 空白字符
console.log(reg.test('asd')) // false
console.log(reg.test('213')) // false
console.log(reg.test('#$%')) // false
console.log(reg.test('#$ %')) // true
const reg1 = /\S/ // 表示字符串 至少出現(xiàn)一個(gè) 非空白字符
console.log(reg1.test('asd')) // true
console.log(reg1.test('213')) // true
console.log(reg1.test('#$%')) // true
console.log(reg1.test('#$ %')) // true
console.log(reg1.test(' ')) // false
const reg = /./ // 表示字符串 至少出現(xiàn)一個(gè) 非換行的任意字符
console.log(reg.test('\n')) // false
console.log(reg.test('123\n')) // true
const reg1 = /\./ // 表示字符串中至少出現(xiàn)一個(gè) 小數(shù)點(diǎn)
console.log(reg1.test('100')) // false
console.log(reg1.test('1.00')) // true
</script>
邊界元字符
1.^ ------ 表示開頭
2.$ ------ 表示結(jié)尾
<script>
const reg1 = /\d/ // 表示字符串至少出現(xiàn)一個(gè)數(shù)字
console.log(reg1.test('abc123def')) // true
const reg2 = /^\d/ // 表示字符串開頭是一個(gè)數(shù)字
console.log(reg2.test('abc123def')) // false
console.log(reg2.test('123def')) // true
const reg3 = /\d$/ // 表示字符串結(jié)尾是一個(gè)數(shù)字
console.log(reg3.test('abc123def')) // false
console.log(reg3.test('abc123')) // true
const reg4 = /^\d$/ // 表示字符串只能是一個(gè)數(shù)字
console.log(reg4.test('abc123def')) // false
console.log(reg4.test('123def')) // false
console.log(reg4.test('123')) // false
console.log(reg4.test('1')) // true
</script>
正則的限定元字符
表示前邊一個(gè)符號(hào)代表的內(nèi)容出現(xiàn)多少次
1.* ------ 表示0~正無窮次
2. + ------ 表示 1~正無窮次
3. ? ------ 表示 0~1次
4. {n} ------ 表示 限定 n 次, 不能多也不能少
5. {n,} ------ 表示 最少 n 次
6. {n,m} ------ 表示 最少 n 次, 最多 m 次
<script>
const reg1 = /^\d*$/ // 這個(gè)字符串的數(shù)字只能出現(xiàn) 0~正無窮次
console.log(reg1.test('1')) // true
console.log(reg1.test('1a')) // false
const reg2 = /^\d+$/ // 這個(gè)字符串的數(shù)字只能出現(xiàn)1~正無窮
console.log(reg2.test('100')) // true
console.log(reg2.test('qwer')) // false
console.log(reg2.test('999qwer')) // false
const reg3 = /^\d?$/ // 這個(gè)字符串的數(shù)字只能出現(xiàn) 0~1 次
console.log(reg3.test('666')) // false
console.log(reg3.test('6')) // true
const reg4 = /^\d{2}$/ // 這個(gè)字符串的數(shù)字只能出現(xiàn) 2 次
console.log(reg4.test('666')) // false
console.log(reg4.test('66')) // true
console.log(reg4.test('6')) // false
const reg5 = /^\d{2,}$/ // 這個(gè)字符串的數(shù)字最少出現(xiàn) 2 次
console.log(reg5.test('666')) // true
console.log(reg5.test('66')) // true
console.log(reg5.test('6')) // false
const reg6 = /^\d{2,3}$/ // 這個(gè)字符串的數(shù)字最少出現(xiàn) 2 次 最多出現(xiàn)3次
console.log(reg6.test('6666')) // false
console.log(reg6.test('666')) // true
console.log(reg6.test('66')) // true
console.log(reg6.test('6')) // false
</script>
特殊元字符
1.()
含義1: 當(dāng)成一個(gè)整體
含義2: 單獨(dú)捕獲(欠著)
2. |
或
字符為 或 左右兩邊的 都行
3. [ ]
包含
注意: [abcd] 包含其中一個(gè)即可 [] 實(shí)際代表的就是 一位字符
4. [^]
非
注意: [^abcd] 只要不是他們四個(gè)中的一個(gè)即可 [^] 實(shí)際代表的就是 一位字符
5.-
到(至)
通常與 包含 和 非 一起使用
[0-9] 數(shù)字 0~9 中的一個(gè) \d
[^0-9] 不是數(shù)字 0~9 中的 一個(gè) \D
[a-z] 小寫 字母a~z
[A-Z] 大寫 字母A~Z
<script>
const reg = /(abc){2}/ // 表示 abc 這個(gè)整體 一定出現(xiàn) 2 次
console.log(reg.test('abcdef')) // false
console.log(reg.test('abcab')) // false
console.log(reg.test('abcabc')) // true
const reg = /(abc|def){2}/ // 這個(gè)字符串需要 abc 或者 def 出現(xiàn)兩次
console.log(reg.test('abcabc')) // true
console.log(reg.test('abcdef')) // true
console.log(reg.test('defabc')) // true
console.log(reg.test('defdef')) // true
const reg = /^[a-c]$/ // 這個(gè)字符串只能是 a-c 其中的任意一個(gè)字符
console.log(reg.test('abc')) // false
console.log(reg.test('a')) // true
console.log(reg.test('b')) // true
console.log(reg.test('c')) // true
console.log(reg.test('@')) // false
</script>
小練習(xí)
問題: 或(|) 的分界線在哪里?
<script>
const reg = /^abc|def$/ // 這段正則什么含義?
const reg1 = /^ab(c|d)ef$/ // 這段正則什么含義?
</script>
或( | )的分界線是小括號(hào)或者正則的邊界
<script>
const reg = /^abc|def$/ // 這段正則什么含義?
*看第一個(gè),沒有小括號(hào),那或的分界線就是到正則的邊界,那么上述的題就可以分解為兩個(gè)部分
*1.^abc
*2.def$
*這兩個(gè)部分的意思就是字符串以abc開頭,以def結(jié)尾,但是因?yàn)闂l件是或所以滿足其中一個(gè)就可以了
console.log(reg.test('abc12345678')) // true
console.log(reg.test('12345678def')) // true
console.log(reg.test('1234abcdef5678')) // false
const reg1 = /^ab(c|d)ef$/ // 這段正則什么含義?
*第二個(gè),有小括號(hào),那么或的邊界線就是小括號(hào)
*把它拆開看就是 ^ab (c|d) ef$
*意思就是字符串以ab開頭,ef結(jié)尾,中間要么是c要么是d
console.log(reg1.test('abcef')) // true
console.log(reg1.test('abdef')) // true
console.log(reg1.test('bdef')) // false
console.log(reg1.test('abde')) // false
</script>
重復(fù)元字符
符號(hào): \1,\2,\3…\9,代表第幾個(gè)小括號(hào)的值
<span></span>
<script>
* /(abc|def)\1/
* 小括號(hào) 內(nèi) 為 abc \1 這個(gè)位置也需要是 abc
* 小括號(hào) 內(nèi) 為 def \1 這個(gè)位置也需要是 def
const reg = /^(abc|def)\1$/ // 小括號(hào)內(nèi)是什么 \1 的位置就應(yīng)該是什么
console.log(reg.test('abcdef')) // false
console.log(reg.test('abcabc')) // true
console.log(reg.test('defabc')) // false
console.log(reg.test('defdef')) // true
const reg1 = /^(abc|def){2}$/ // 小括號(hào)的內(nèi)容, 出現(xiàn)兩次, 但是每次的值, 可以不同
console.log(reg1.test('abcdef')) // true
console.log(reg1.test('abcabc')) // true
console.log(reg1.test('defabc')) // true
console.log(reg1.test('defdef')) // true
const reg2 = /^<(p|span)><\/\1>$/
console.log(reg2.test('<span></span>')) // true
console.log(reg2.test('<p></p>')) // true
console.log(reg2.test('<p></span>')) // false
</script>
正則的標(biāo)識(shí)符(修飾符)
書寫在正則表達(dá)式的外面,用于描述整個(gè)正則表達(dá)式
- i
忽略大小寫 - g
全局
<script>
const reg = /^[a-c]$/
console.log(reg.test('a')) // true
console.log(reg.test('A')) // false
const reg1 = /^[a-c]$/i // 忽略大小寫
console.log(reg1.test('a')) // true
console.log(reg1.test('A')) // true
</script>
正則表達(dá)式的捕獲
語法:正則.exec(字符串)文章來源：http://www.zghlxwxcb.cn/news/detail-753975.html
- 沒有捕獲到: 直接返回一個(gè) null
- 捕獲到
2.1 沒有小括號(hào)也沒g 的情況, 永遠(yuǎn)捕獲的都是下標(biāo)0開始的第一個(gè)符合條件的
2.2 沒有小括號(hào), 但是有修飾符g 的情況
第一次捕獲完成后, 第二次開始的時(shí)候, 會(huì)從第一次捕獲結(jié)束的位置開始
第三次開始的時(shí)候, 會(huì)從第二次捕獲結(jié)束的位置開始
當(dāng)所有的匹配項(xiàng)都匹配完成后, 會(huì)返回一個(gè) null
當(dāng)再次捕獲的時(shí)候, 就從下標(biāo)0重新開始
2.3有小括號(hào),下標(biāo)0 還是我們正常捕獲到的內(nèi)容,從 下標(biāo)1開始, 就是每個(gè)小括號(hào)捕獲到的內(nèi)容
<script>
// 1. 沒有捕獲到
const reg = /\d{3}/
console.log(reg.exec('zxcvbnm')) // null
// 2.1 沒有小括號(hào), 也沒有 g
const reg = /\d{3}/
console.log(reg.exec('z123xc456vb789nm000')) //123
console.log(reg.exec('z123xc456vb789nm000')) //123
console.log(reg.exec('z123xc456vb789nm000')) //123
// 2.2 有修飾符 g
const reg = /\d{3}/g
console.log(reg.exec('z123xc456vb789nm000')) // 123
console.log(reg.exec('z123xc456vb789nm000')) // 456
console.log(reg.exec('z123xc456vb789nm000')) // 789
console.log(reg.exec('z123xc456vb789nm000')) // 000
console.log(reg.exec('z123xc456vb789nm000')) // null
console.log(reg.exec('z123xc456vb789nm000')) // 123
// 2.3 有小括號(hào)
const reg = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/
const str = '我的身份證號(hào)是 411371200411081234'
console.log(reg.exec(str)) //['411371200411081234', '4113', '71', '20', '04', '11', '08', '12', '34']
const reg1 = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2}|\dx)/
const str1 = '我的身份證號(hào)是 41137120041108123x' //['411371200411081234', '4113', '71', '20', '04', '11', '08', '12', '3x']
console.log(reg1.exec(str1))
</script>
正則的兩大特性
1.懶惰
正常捕獲字符串的時(shí)候, 每次都從下標(biāo)0開始
解決方式: 給正則添加一個(gè)修飾符 g
2.貪婪
每次在捕獲的時(shí)候, 會(huì)盡可能的多捕獲一些東西
解決方法: 在原有的修飾符后添加一個(gè) ? 然后相當(dāng)于開啟非貪婪模式文章來源地址http://www.zghlxwxcb.cn/news/detail-753975.html
<script>
* 貪婪限定符
* *
* +
* ?
* {n,}
* {n,m}
*
* 非貪婪限定符
* *?
* +?
* ??
* {n,}?
* {n,m}?
const str = '<div class="box" id="box1"><span></span></div>'
const reg = /<div.*>/ // 貪婪模式
console.log(reg.exec(str))
// ['<div class="box" id="box1"><span></span></div>']
const reg1 = /<div.*?>/ // 非貪婪模式
console.log(reg1.exec(str))
//['<div class="box" id="box1">']
</script>
到了這里，關(guān)于JS中的正則表達(dá)式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
