js中的正则表达式

117 阅读6分钟

正则表达式

规则表达式

我们书写规则,然后专门用来检测 字符串 是否符合规则

创建正则

1. var reg = /正则在这里边/
2. var reg = new RegExp('正则写在这里边')
//例
var reg = /abc/ 
console.log(reg)
var reg2 = new RegExp('abcd')
console.log(reg2)

正则两种创建方式的区别

1. 书写标识符

(1). 字面量的方式, 直接在正则后书写标识符

let reg1 = /abc/i

(2). 内置构造函数的方式, 需要写在第二个参数中

let reg2 = new RegExp('qwe', 'ig')

2. 书写元字符

(1)字面量的方式

let reg1 = /\d\w\s.\./
console.log(reg1)  //打印值/\d\w\s.\./

(2)内置结构函数方式

let reg2 = new RegExp('\d\w')
console.log(reg2)  //打印值/dw/

内置结构函数方式按上述方法书写的规则无任何 意义

原因:

在字符串中, 如果 书写了 \ 那么相当于转义符, 将后边的字符转换为 有意义的字符

但是 转换完成之后, \ 就会自动消失, 那么正则拿到的就是一个 具有特殊含义的 字符 d,

但是又因为 正则中 元字符 必须是 \ + d 结合在一起才是一个元字符, 如果只有一个 d 那么就是一个普通的字母, 没有任何特殊含义

解决方法:

在原本的 \ 前再添加一个 \

第一个 \ 将 第二个 \ 转换为没有任何意义的 普通文本, 最终正则拿到的就是一个 没有特殊含义的 \ + d

然后按照正则的规则中, +d 就是一个元字符, 代表的是数字0-9

let reg2 = new RegExp('\\d\\w')
console.log(reg2) //打印值/\d\w/

正则的常用方法

匹配

用 test 匹配字符串是否符合正则规则

语法:正则.test(字符串)

返回值:

  1. true 符合
  2. false 不符合
var ret = /abc/  
var str = 'a12bc'
var str1 = 'abc'
var str2 = '123abc'
var str3 = '12abc34'
console.log(ret.test(str))
console.log(ret.test(str1))
console.log(ret.test(str2))
console.log(ret.test(str3))

正则的元字符

正则表达式的符号,由两种符号组成

元字符

正则的规则符号

普通文本--正则的规定符号

修饰符

修饰整个正则表达式的符号

普通元字符

\d 表示是否包含一位数字(0~9)
var ret = /\d/
var str = 'abc'
var str1 = 'abc1'
console.log(ret.test(str))  //false
console.log(ret.test(str1))  //true
\D 表示是否包含一个非数字(空字符串不符合)
var ret = /\D/
var str = 'abc'
var str1 = 'abc1'
var str2 = '123456'
console.log(ret.test(str))  //true
console.log(ret.test(str1))  //true
console.log(ret.test(str2))  //false
\s 表示包含一位空白内容(空格/缩进...)
var ret = /\s/
var str = 'abc'
 var str1 = 'a bc'
var str2 = ' '  //空格
var str3 = ''  //空字符串
console.log(ret.test(str))  //false
console.log(ret.test(str1))  //true
console.log(ret.test(str2))  //true
console.log(ret.test(str3))  //false
\S 表示包含一位非空白到的内容
var ret = /\s/
var str = 'abc'
var str1 = 'a bc'
var str2 = ' '
var str3 = ''
console.log(ret.test(str))  //true
 console.log(ret.test(str1))  //true
 console.log(ret.test(str2))  //false
console.log(ret.test(str3))  //false
\w 表示包含一位数字(0 ~ 9)/字母 (a ~ z/A ~ Z)/下划线
var ret = /\w/
var str = 'abc'
var str1 = '123'
var str2 = 'abc123'
var str3 = '_'
ar str4 = 'ABC'
var str5 = ' '
var str6 = ''
var str7 = '@!#$%'
console.log(ret.test(str))  //true
console.log(ret.test(str1))  //true
 console.log(ret.test(str2))  //true
console.log(ret.test(str3))  //true
console.log(ret.test(str4))  //true
console.log(ret.test(str5))  //false
console.log(ret.test(str6))  //false
console.log(ret.test(str7))  //false
\W 表示包含一位 非数字(0 ~ 9)/字母(a ~ z/A ~ Z)/下划线
var ret = /\W/
var str = 'abc'
 var str1 = '123'
var str2 = 'abc123'
var str3 = '_'
var str4 = 'ABC'
var str5 = ' '
var str6 = ''
var str7 = '@!#$%'
console.log(ret.test(str))  //false
console.log(ret.test(str1))  //false
 console.log(ret.test(str2))  //false
console.log(ret.test(str3))  //false
console.log(ret.test(str4))  //false
console.log(ret.test(str5))  //true
console.log(ret.test(str6))  //false
console.log(ret.test(str7))  //true
. 表示包含一位非换行内容
var ret = /./
var str = '12a!@_'
var str1 = '123'
var str2 = 'asd'
var str3 = '!@#$%'
var str4 = '\n'  //\n在js中表示换行
console.log(ret.test(str))  //true
console.log(ret.test(str1))  //true
console.log(ret.test(str2))  //true
console.log(ret.test(str3))  //true
console.log(ret.test(str4))  //false
\ 表示转义符

**在正则中 . 表示包含非换行内容 若加上 \ 即 . 则代表一个单纯的的小数点(这个形式可以用来在正则中规定小数) **

 var ret = /\d\.\d/   //代表包含小数 \d 可以是准确的数,若不写则表示(0.0~9.9)

正则的边界元字符

^ 表示开头
var ter = /^\d/  //表示字符串需要数字开头
var str = '12abdcg'
var str1 = 'asdcvg123'
console.log(ter.test(str))  //true
console.log(ter.test(str1))  //false
$ 表示结尾
var ter = /\d$/  //表示字符串需要数字结尾
var str = '12abdcg'
var str1 = 'asdcvg123'
console.log(ter.test(str))  //false
console.log(ter.test(str1))  //true
^与$同时使用

当两者共同使用时,表示字符串必须是规则里的内容

var ret = /^abc$/  //表示字符串的内容必须是abc
var str = '123abc'
var str1 = 'abc123'
var str2 = 'abc'
console.log(ret.test(str))  //false
console.log(ret.test(str1))  //false
console.log(ret.test(str2))  //true

正则的限定元字符

限定了前一个符号出现多少次

* 表示0~正无穷次
var ret = /^\d*$/  //表示字符串只能是数字且要出现0~正无穷次
var str = 'a131d'
var str1 = '123246'
console.log(ret.test(str))  //false
console.log(ret.test(str1))  //true
+ 表示1~正无穷次
var ret = /^\d+$/  //表示字符串只能是数字且要出现1~正无穷次
var str = 'a131d'
var str1 = '123246'
var str2 = ' '
console.log(ret.test(str))  //false
console.log(ret.test(str1))  //true
console.log(ret.test(str2))  //false
? 表示0~1
var ret = /^\d?$/  //表示字符串只能是数字且要出现0~1
var str = 'a131d'
var str1 = '1'
var str2 = '12'
console.log(ret.test(str))  //false
console.log(ret.test(str1))  //true
console.log(ret.test(str2))  //false
{n} 表示出现几次(n表示出现的次数)
var ret = /^\d{3}$/  //表示字符串只能是数字且要出现3
var str = 'a131d'
var str1 = '1'
var str2 = '123'
console.log(ret.test(str))  //false
console.log(ret.test(str1))  //false
console.log(ret.test(str2))  //true
{n,} 表示出现最少n次(n表示出现的次数)
var ret = /^\d{3,}$/  //表示字符串只能是数字且要出现至少3
var str = 'a131d'
var str1 = '1'
var str2 = '123'
var str3 = '123654854'
console.log(ret.test(str))  //false
console.log(ret.test(str1))  //false
console.log(ret.test(str2))  //true
console.log(ret.test(str3))  //true
{n,m} 表示出现最少n次,最多出现m次(n/m表示出现的次数)
var ret = /^\d{3,5}$/  //表示字符串只能是数字且最少出现3次,最多出现5次
var str = 'a131d'
var str1 = '1'
var str2 = '123'
var str3 = '123654854'
console.log(ret.test(str))  //false
 console.log(ret.test(str1))  //false
console.log(ret.test(str2))  //true
console.log(ret.test(str3))  //true

正则的特殊性元字符

()
含义1: 单独捕获

注意:在捕获时小括号里的内容会被单独获取出来,放到数组下标1的地方 , 以此类推.

含义2:一个整体
var ret = /(abc){2}/  //表示要求字符串要出现2次abc且必须相连
var str = 'abc'
var str1 = 'abcabc'
var str2 = 'abc123abc'
console.log(ret.test(str)) //false
console.log(ret.test(str1)) //true   
console.log(ret.test(str2)) //false
|

表示或

var ret = /a|b/  //表示字符串里必须要有a或b
var str = 'a'
var str1 = 'b'
var str2 = 'c'
var str3 = 'ab'
var str4 = 'ac'
console.log(ret.test(str))   //true
console.log(ret.test(str1))  //true
console.log(ret.test(str2))  //false  
console.log(ret.test(str3))  //true
console.log(ret.test(str4))  //true

[ ]

表示包含中括号内其中一个即可,即在中括号内书写任意数量的符号,但只要满足其中一个即可

var reg = /^[abcd]$/  //表示只要字符串中包含a b c d 任意一个就可以(只能有一个)
var str = 'a'
var str1 = 'b'
var str2 = 'cd'
console.log(reg.test(str))   //true
console.log(reg.test(str1))  //true
console.log(reg.test(str2))  //false

[^]

  1. 表示不包含

  2. 在括号内书写任意数量的符号,只要字符串不是其中的某一个即可

vae reg = /^[^abcd]$/  //表示字符串中不可以是a b c d即可(只能有一个)
var str = 'a'
var str1 = 'b'
var str2 = 'e'
var str3 = 'cd'
console.log(reg.test(str)) //false
console.log(reg.test(str1)) //false
console.log(reg.test(str2)) //true
console.log(reg.test(str3)) //false

-

  1. 表示 到 至

  2. 通常与[ ] [^]连用

  3. [0-9] 表示数字 0~9 等价于 \d

  4. [^0-9] 表示非数字0~9 等价于\D

  5. [a-z] 表示字母a-z

  6. [0-9a-zA-Z] 等价于\w

重复元字符

符号:\数字

如:\1 \2 \3..

表示重复第n个小括号里的内容, 并要求和小括号内的内容完全一致

var teg = /^(abc|123)\1$/  //重复第一个小括号内的内容
var str = 'abc'
var str1 = 'abcabc'
var str2 = '123123'
var str3 = 'abc123'
console.log(reg.test(str)) //false
console.log(reg.test(str1)) //true
console.log(reg.test(str2)) //true
console.log(reg.test(str3)) //false

元字符或的分界线

或的分界线为 小括号或者正则的边界

没有小括号时

var reg = /^abc|123$/ //表示字符串要以abc开头或者123结尾
var str = 'abc456'
var str1 = 'asd123'
var str2 = '123abc'
console.log(reg.test(str))  //true
console.log(reg.test(str1))  //true
console.log(reg.test(str2))  //false

有小括号时

var reg = /^ab(c|1)23$/  //表示字符串必须是ab c 23 或 ab 1 23 
var str = 'abc23'
var str1 = 'ab123'
var str2 = 'abc123'
var str3 = 'qwe456'
console.log(reg.test(str))  //true
console.log(reg.test(str1))  //true
console.log(reg.test(str2))  //false
console.log(reg.test(str3))  //false

捕获

正则的捕获(还账)

语法:正则.exec(字符串)

字符串没有符合正则的内容

捕获的结果为null

var teg = /\d{3}/
var str = 'asdcf'
console.log(teg.exec(str))  //null

正则没有小括号,没有标识符g

捕获到的是一个数组,下标0是我们捕获到的值,但是不管捕获多少次,都是从下标0开始,捕获第一个满足条件值

var teg = /\d{3}/
var str = 'abc123qwe234asd456'
console.log(teg.exec(str)) // 一个数组且下标0位123
console.log(teg.exec(str)) // 一个数组且下标0位123
console.log(teg.exec(str)) // 一个数组且下标0位123

有小括号

捕获结果:下标0是符合正则规则的字符串 从下标1开始,是每个小括号单独捕获的内容

var teg = /(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/
var str = '0123456789'
console.log(teg.exec(str))  //一个数组且下标0为字符串本身,从下标1开始为每个小括号内单独捕获的内容
如果字符串不符合规则捕获则为null
var teg = /(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/
var str = 'qwe01asd23ad45zx67qw89'
console.log(teg.exec(str))  //null

有标识符 g

第二次捕获时会在第一次捕获结束的地方开始继续往后进行

var teg = /\d{3}/g
var str = 'abc123qwe456asd789'
console.log(teg.exec(str)) //第一次 下标0为123的数组
console.log(teg.exec(str)) //第二次 下标0为456的数组
console.log(teg.exec(str)) //第三次 下标0为789的数组
console.log(teg.exec(str)) //第四次 null 
console.log(teg.exec(str)) //第五次 下标0为123的数组

正则的两大特性

1.懒惰

每次捕获都是从下标0开始

解决方法:添加全局标识符 g

2.贪婪

每次捕获时都会尽可能的多去捕获

解决方法:使用非贪婪限定符(在原有限定符后添加?)

贪婪限定符

  1. *
  2. +
  3. ?
  4. {n}
  5. {n,}
  6. {n,m}

非贪婪限定符

  1. *?
  2. +?
  3. ??
  4. {n}?
  5. {n,}?
  6. {n,m}?