前端使用正则表达式进行校验的方法总结大全

一、定义

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

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

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

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

二、匹配规则

常见的校验规则如下：

正则表达式标记

三、匹配方法

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

• 字符串（str）方法：match、matchAll、search、replace、split
• 正则对象下（regexp）的方法：test、exec

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 表示是否存在

附：断言例子

?=匹配一个字符串，该字符串后面跟着一个特定的子字符串：

/Roger(?=Waters)/ 
/Roger(?= Waters)/.test('Roger is my dog') //false 
/Roger(?= Waters)/.test('Roger is my dog and Roger Waters is a famous musician') //true

?! 执行逆操作，匹配一个字符串，该字符串后面没有一个特定的子字符串：

/Roger(?!Waters)/
/Roger(?! Waters)/.test('Roger is my dog') //true
/Roger(?! Waters)/.test('Roger Waters is a famous musician') //false

先行断言(lookahead)使用 ?= 符号。它们已经可用了。

后行断言(lookbehind)，是一个新功能，使用 ?< =。

/(?<=Roger) Waters/
/(?<=Roger) Waters/.test('Pink Waters is my dog') //false
/(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //true

后行断言(lookbehind) 逆操作，使用 ?<!。

/(?<!Roger) Waters/
/(?<!Roger) Waters/.test('Pink Waters is my dog') //true
/(?<!Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //false

总结

到此这篇关于前端使用正则表达式进行校验的文章就介绍到这了,更多相关前端正则表达式校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论