一、限定符

1、限定符 ?

?是一个限定符,它表示前面的这个字符需要出现的次数是0次或1次,简单来说,?前面的这个字符可有可无。

例子:可以看到我们用 used? 表达式可以匹配到下面的use和used,因为d可有可无
在这里插入图片描述

2、限定符 *

* 会去匹配0或多个字符

例子:ab*c表达式,表示中间的字符b可以没有也可以出现多次
在这里插入图片描述

3、限定符 +

+ 会匹配一次及一次以上的字符

例子:ab+c表达式,表示中间的字符b至少出现一次
在这里插入图片描述

4、{ }

4.1、更为精确地匹配出现的次数

例子:指定字符b出现的次数为6次
在这里插入图片描述

4.2、精确地指定出现的次数范围

例子:指定字符b出现的次数为4到6次
在这里插入图片描述
例子:指定字符b出现的次数为4次以上
在这里插入图片描述
注意:{}中的,后面不能有空格。{4,6}不能写成{4, 6}

5、()

例子:要匹配 ab,将ab用()括起来
在这里插入图片描述

二、 “或” 运算符

1、“ | ”

例子: 要匹配 a cat 或者是 a dog。 | 表示或,表达式为 a (cat|dog),空格不要随便加
注意: 这里的()必不可少,如果写成 a cat|dog,则表示匹配 a cat 或者是 dog
在这里插入图片描述

2、[ ]

2.1、[ ] 中的内容代表要求匹配的字符只能取自于它们

例子:
在这里插入图片描述

2.2、在[ ]中指定字符的范围

[a-z] 代表所有小写英文字符
[A-Z] 代表所有大写英文字符
[0-9] 代表所有数字
[a-zA-Z0-9]代表所有的英文字符和数字
在这里插入图片描述

3、 ^

^ 表示匹配除^后面以外的字符

例子:[^0-9] 匹配除数字外的字符(包括换行符)。
在这里插入图片描述

三、元字符

1、\d 代表数字字符

等同于 [0-9]
在这里插入图片描述

2、\w 代表单词字符(英文字符、数字、下划线)

在这里插入图片描述

3、 \s 代表空白符(包括tab和换行符)

在这里插入图片描述

4、\D 代表非数字字符

在这里插入图片描述

5、\W代表非单词字符

在这里插入图片描述

6、\S代表非空白字符

在这里插入图片描述

7、\b代表单词边界

例子: 匹配16进制RGB颜色值
在这里插入图片描述

8、. 代表任意字符,但不包括换行符

在这里插入图片描述

四、特殊字符 ^ 和 $

1、^ 匹配行首

例子: ^a 只会匹配行首的a
在这里插入图片描述

2、$ 匹配行尾

在这里插入图片描述

五、贪婪与懒惰匹配

前面讲到的 * + {} 等在匹配字符串的时候默认会尽可能匹配多的字符

1、匹配HTML标签

<div><span>This is a simple text.</span></div>

要匹配上述html标签,我们首先想到 <.+>,但是会匹配到整个句子,因为 .+ 会匹配尽可能多的字符
在这里插入图片描述
解决方法: 加个?,变成<.+?>
在这里插入图片描述
它会将正则表达式中默认的贪婪匹配(Greedy Match)切换为懒情匹配(Lazy Match)

六、 常用正则校验

1、不可输入空格

const reg = /^(\S+)$/

2、不可输入中文

// value表示输入的值
if (/[\u4E00-\u9FA5]/g.test(value)) {
  alert('不可输入中文');
}

总结

在这里插入图片描述
推荐b站视频:10分钟快速掌握正则表达式

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐