正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象
通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式
例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框可以输入中文(匹配) 如用户名: /^[a-z0-9_-]{3,16}$/
过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。


总结:
正则表达式作用:
![]()
其中/ / 是正则表达式字面量
例如查找下面文本中是否包含字符串‘前端’
![]()
test()方法 用来查看正则表达式与指定的字符串是否匹配
语法:![]()
例如:

如果正则表达式与指定的字符串匹配,返回true,否则false
总结:
1.正则表达式定义规则
- 定义正则表达式
- 检测查找是否匹配
exec()方法 在一个指定字符串中执行一个搜索匹配
语法:![]()
例如:

如果匹配成功,exec()方法返回一个数组,否则返回null
总结:
1.正则表达式检测查找 test方法和exec方法区别
- test方法用于判断是否有符合规则的字符串,返回的是布尔值 找到返回true,否则false
- exec方法用于检索(查找)符合规则的字符串,找到返回数组,否则为null
大多数的字符仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字。也就是说普通字符只能匹配字符串中与它们相同的字符
元字符是一些具有特俗含义的字符,可以极大提高灵活性和强大的匹配功能
比如:规定用户只能输入26个英文字母,普通字符的话abcdef……,但是换成元字符写法:[a-z]
MON:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
正则测试工具:http://tool.oschina.net/regex
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符
| 边界符 | 说明 |
| ^ | 表示匹配行首的文本(以谁开始) |
| $ | 表示匹配行尾的文本(以谁结束) |
如果^和$在一起,表示必须是精确匹配。
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符
量词用来设定某个模式出现的次数
| 量词 | 说明 |
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
注意:逗号两侧千万不要出现空格
(1)[]匹配字符集合
后面的字符串只要包含abc中任意一个字符,都返回true。

(2)[]里面加上-连字符
使用连字符-表示一个范围
![]()
比如:
(3)[]里面加上^取反符号
比如:
(4). 匹配除换行符之外的任何单个字符
(5)预定义指的是 某些常见模式的简写方式
| 预定类 | 说明 |
| \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] |
![]()
需求:用户名要求用户英文字母、数字,下划线或者短横线组成,并且用户名长度为6~16位
分析:
①:首先准备好这种正则表达式模式/^[a-zA-Z0-9-_]{6,16}$/
②:当表单失去焦点就开始验证
③:如果符合正则规范,则让后面的span标签添加right类
④:如果不符合正则规范,则让后面的span标签添加wrong类
- DOCTYPE html>
-
-
-
-
-
Document -
- span {
- display: inline-block;
- width: 250px;
- height: 30px;
- vertical-align: middle;
- line-height: 30px;
- padding-left: 15px;
- }
-
- .error {
- color: red;
- background: url(./images/error1.png) no-repeat left center;
- }
-
- .right {
- color: green;
- background: url(./images/right.png) no-repeat left center;
- }
-
-
-
-
-
- const reg = /^[a-zA-Z0-9_]{6,16}$/
- const input = document.querySelector('input')
- const span = input.nextElementSibling
- input.addEventListener('blur',function(){
- // console.log(reg.test(this.value))
- if(reg.test(this.value)){
- span.innerHTML = '输入正确'
- span.className = 'right'
- } else {
- span.innerHTML = '请输入6~16位的英文数字下划线'
- span.className = 'error'
- }
- })
-
-
修饰符约束正则执行的某些细节行为,如是否区分大小写、是否支持多行匹配等
语法:![]()

替换replace替换
语法:![]()
需求:要求用户不能输入敏感字
比如:今天我看到**
分析:
①:用户输入内容
②:内容进行正则替换查找,找到敏感词,进行**
③:要全局替换使用修饰符g
- DOCTYPE html>
-
-
-
Document -
-
-
-
- const tx = document.querySelector('textarea')
- const btn = document.querySelector('button')
- const div = document.querySelector('div')
- btn.addEventListener('click',function(){
- // console.log(tx.value)
- div.innerHTML = tx.value.replace(/摔跤|衰跤/g,'**')
- tx.value = ''
- })
-