正则表达式#
正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式,在js中,正则表达式也是对象
通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式
在js中的使用场景:
-
例如表单验证:用户名表单只能输入英文字母、数字或下划线,昵称输入框中可以输入中文(匹配),比如用户名:
/^[a-z0-9_-]{3,16}$/
- 过滤掉页面内容中的一些敏感词(替换)
- 或者从字符串中获取想要的特定部分(提取)等
语法#
- 定义规则
- 查找
检索(查找)语法#
exec()
方法,在一个指定的字符串中执行一个搜索匹配
JavaScript// 返回的是数组 regObj.exec(被检测的字符串)
若匹配成功,exec()方法返回一个数组,否则返回null
比如:查找文本中是否包含字符串'前端'
JavaScriptlet str='IT培训,前端开发培训,web前端培训,软件测试培训,产品经理培训' const reg=/前端/ console.log(reg.test(str)) // true console.log(reg.exec(str)) // 返回的是数组
元字符#
元字符分为三类:
- 边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)
- 量词(表示重复次数)
- 字符类(比如\d表示0~9)
量词#
用来设定某个模式出现的次数
量词 | 说明 |
---|---|
* | 重复零次或更多次 |
+ | 重复一次或更多次 |
? | 重复零次或一次 |
{n} | 重复n次 |
{n,} | 重复n次或更多次 |
{n,m} | 重复n到m次 |
注意:逗号左右两侧千万不能有空格
字符类#
[]
匹配字符集合
后面的字符串只要包含abc中任意一个字符,都返回true
[]
中加上
-
连字符
使用连字符
-
表示一个范围
JavaScriptconsole.log(/^[a-z]$/.test('c')) // true
比如:
- [a-z]表示a到z26个英文字母都可以
- [a-zA-Z]表示大小写都可以
- [0-9]表示0-9的数字都可以
JavaScript腾讯QQ号:^[1-9][0-9]{4,}$ (腾讯QQ号从10000开始)
[]
里面加上
^
取反符号
比如:
- [^a-z]匹配除了小写字母以外的字符
- 注意要写到中括号里面
[]
里面加上
.(点)
匹配除了换行符之外的任何单个字符
预定义 :指的是某些常见模式的简写方式
预定类 | 说明 |
---|---|
\d | 匹配0-9之间的任一数字,相当于[0-9] |
\D | 匹配所有0-9以外的字符,相当于[^0-9] |
\w | 匹配任意的字母、数字和下划线,相当于[A-Za-z0-9_] |
\W | 除所有字母、数字和下划线以外的字符,相当于[^a-zA-Z0-9_] |
\s | 匹配空格(包括换行符、制表、空格符等),相当于[\t\r\n\v\f] |
\S | 匹配非空格的字符,相当于[^\t\r\n\v\f] |
日期格式:
^\d{4}-\d{1,2}-\d{1,2}
案例-用户名验证#
需求:用户名要求用户英文字母,数字,下划线或者短横线组成,并且用户名长度为6~16位
分析:
-
首先准备好正则表达式模式
/^[a-zA-Z0-9-_]{6,16}$/
- 当表单失去焦点就开始验证
-
若符合正则规范,则让后面的span标签添加
right
类 -
否则,添加
wrong
类
修饰符#
修饰符约束正则执行的某些细节行为,如是否区分大小写、是否支持多行匹配等
-
i
是单词ignore的缩写,正则匹配时字母不区分大小写 -
g
是单词global的缩写,匹配所有满足正则表达式的结果
语法:
JavaScript/表达式/修饰符 console.log(/a/i.test('a')) // true console.log(/a/i.test('A')) // true
replace替换#
替换符合规则的第一个字符串为指定字符串
JavaScript字符串.replace(/正则表达式/,'替换的文本') const str='java是一门编程语言,学完JAVA工资很高' const re=str.replace(/java/ig,'JavaScript') console.log(re) // JavaScript是一门编程语言,学完JavaScript工资很高
案例-过滤敏感字#
需求:要求用户不能输入敏感字
比如,基情满满->**满满,大傻逼->大**
分析:
- 用户输入内容
- 内容进行正则替换查找,找到敏感词,进行**替换
-
要全局替换使用修饰符
g