前端使用正则表达式进行校验

一、定义

设计思想是用一种描述性的语言定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的。

在 JavaScript中,正则表达式也是对象,构建正则表达式有两种方式:

1、字面量创建,其由包含在斜杠之间的模式组成

2、调用RegExp对象的构造函数

二、匹配规则

常见的校验规则如下:

规则描述
\转义
^匹配输入的开始
$匹配输入的结束
*匹配前一个表达式 0 次或多次
+匹配前面一个表达式 1 次或者多次。等价于 {1,}
?匹配前面一个表达式 0 次或者 1 次。等价于{0,1}
.默认匹配除换行符之外的任何单个字符
x(?=y)匹配'x'仅仅当'x'后面跟着'y'。这种叫做先行断言
(?<=y)x匹配'x'仅当'x'前面是'y'.这种叫做后行断言
x(?!y)仅仅当'x'后面不跟着'y'时匹配'x',这被称为正向否定查找
(?<!y)x仅仅当'x'前面不是'y'时匹配'x',这被称为反向否定查找
x|y匹配‘x’或者‘y’
{n}n 是一个正整数,匹配了前面一个字符刚好出现了 n 次
{n,}n是一个正整数,匹配前一个字符至少出现了n次
{n,m}n 和 m 都是整数。匹配前面的字符至少n次,最多m次
[xyz]一个字符集合。匹配方括号中的任意字符
[^xyz]匹配任何没有包含在方括号中的字符
\b匹配一个词的边界,例如在字母和空格之间
\B匹配一个非单词边界
\d匹配一个数字
\D匹配一个非数字字符
\f匹配一个换页符
\n匹配一个换行符
\r匹配一个回车符
\s匹配一个空白字符,包括空格、制表符、换页符和换行符
\S匹配一个非空白字符
\w匹配一个单字字符(字母、数字或者下划线)
\W匹配一个非单字字符

正则表达式标记

标志描述
g全局搜索。
i不区分大小写搜索。
m多行搜索。
s允许 . 匹配换行符。
u使用unicode码的模式进行匹配。
y执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。

三、匹配方法

正则表达式常被用于某些方法,我们可以分成两类:

  • 字符串(str)方法:matchmatchAllsearchreplacesplit
  • 正则对象下(regexp)的方法:testexec
方法描述
exec一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回 null)。
test一个在字符串中测试是否匹配的RegExp方法,它返回 true 或 false。
match一个在字符串中执行查找匹配的String方法,它返回一个数组,在未匹配到时会返回 null。
matchAll一个在字符串中执行查找所有匹配的String方法,它返回一个迭代器(iterator)。
search一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。
replace一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。
split一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的 String 方法。

str.match(regexp)

str.match(regexp) 方法在字符串 str 中找到匹配 regexp 的字符

如果 regexp 不带有 g 标记,则它以数组的形式返回第一个匹配项,其中包含分组和属性 index(匹配项的位置)、input(输入字符串,等于 str

如果 regexp 带有 g 标记,则它将所有匹配项的数组作为字符串返回,而不包含分组和其他详细信息

如果没有匹配项,则无论是否带有标记 g ,都将返回 null

str.matchAll(regexp)

返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器

str.search(regexp)

返回第一个匹配项的位置,如果未找到,则返回 -1,这里需要注意的是,search 仅查找第一个匹配项

str.replace(regexp)

替换与正则表达式匹配的子串,并返回替换后的字符串。在不设置全局匹配g的时候,只替换第一个匹配成功的字符串片段

str.split(regexp)

使用正则表达式(或子字符串)作为分隔符来分割字符串

regexp.exec(str)

regexp.exec(str) 方法返回字符串 str 中的 regexp 匹配项,与以前的方法不同,它是在正则表达式而不是字符串上调用的,根据正则表达式是否带有标志 g,它的行为有所不同

如果没有 g,那么 regexp.exec(str) 返回的第一个匹配与 str.match(regexp) 完全相同

如果有标记 g,调用 regexp.exec(str) 会返回第一个匹配项,并将紧随其后的位置保存在属性regexp.lastIndex 中。 下一次同样的调用会从位置 regexp.lastIndex 开始搜索,返回下一个匹配项,并将其后的位置保存在 regexp.lastIndex 中

regexp.test(str)

查找匹配项,然后返回 true/false 表示是否存在

  • 17
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值