目录
一：正则表达式简介
1 什么是正则表达式
2 正则表达式作用
二：语法格式：
1 定义正则表达式
2 检索、判断是否匹配
（1）test()方法
（2）exec()方法
三：元字符
普通字符：
元字符（特殊字符）
元字符分类
边界符（确定位置）
量词（表示重复次数）
字符类
[ ]匹配字符集合
(1)[ ]里加上连字符“-”
(2)[ ]里面加一个^取反符号
“.”匹配除换行符之外的任何单个字符
预定义
四：修饰符
作用：
语法格式：
replace方法
语法：
五：综合案例
需求以及实现：
效果图：
素材：
本文章目标：学习正则表达式概念及语法，编写简单的正则表达式实现字符查找或检测；
一：正则表达式简介
1 什么是正则表达式
是用于匹配字符串中字符组合的模式。在JS中，正则表达式也是对象
2 正则表达式作用
- 表单验证（匹配）：用户名只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文
- 过滤敏感词（替换）：过滤掉页面内容中的一些敏感词
- 字符串中提取想要部分（提取）
二：语法格式：
分为两步：先定义正则表达式规则，再根据规则进行查找
1 定义正则表达式
const 变量名 = /表达式/2 检索、判断是否匹配
（1）test()方法
用来判断确定的正则表达式与指定的字符串是否匹配。如果匹配成功返回true，没有匹配成功返回false
语法：
定义规则的变量名.test(被检测的字符串)案例：
const str = '前端加油'
const reg = /前端/
console.log(reg.test(str));//true（2）exec()方法
在一个指定字符串中执行一个搜索匹配。如果匹配成功，该方法返回一个数组，否则返回null
语法：
建立的规则.exec(被检测的字符串)案例：
const str = '前端加油'
const reg = /前端/
// console.log(reg.test(str));
console.log(reg.exec(str));
三：元字符
普通字符：
大多数字符仅能描述他们本身，称为普通字符。例如所有的字母和数字，以及汉字
也就是说，普通字符只能够匹配字符串中与它们相同的字符
元字符（特殊字符）
是一些具有特殊含义的字符，可以极大提高灵活性和强大的匹配功能
- 比如，规定用户只能输入26个英文字母，普通字符要写abcdefg...
- 元字符写法:[a-z]
元字符分类
边界符（确定位置）
用来提示字符所处的位置，主要有两个字符
^、$两个都出现在正则表达式定义的规则中，则表示精确匹配
量词（表示重复次数）
用来定义某个模式出现的次数
字符类
[ ]匹配字符集合
作用：匹配中括号中任意一个字符
/[abc]/.test('待匹配的字符串')，小括号中字符串只要包含abc中任意一个字符，都返回true
(1)[ ]里加上连字符“-”
使用连字符表示匹配一个范围
[a-zA-Z]表示匹配小写a-z以及大写A-Z中任意一个字符
腾讯QQ号的正则表达式：
/^[1-9][0-9]{4,}/，表示以数字1-9开头，4位以上的数字(2)[ ]里面加一个^取反符号
/[^a-z]/表示匹配除小写字母以外的字符，注意实在中括号中添加而非再/ /中添加
“.”匹配除换行符之外的任何单个字符
预定义
指的是某些常见模式的简写方式
日期格式：^\d{4}-\d{1,2}-\d{1,2}
四：修饰符
作用：
用于限定正则表达式匹配时的某些细节
语法格式：
/表达式/修饰符两种修饰符如下：
i是单词ignore的缩写，正则匹配时字母不区分大小写
g是单词global的缩写，匹配字符串中满足正则表达式的所有结果
console.log(/A/i.test('A'))//truereplace方法
语法：
字符串.replace(/正则表达式/,'替换的文本')五：综合案例
需求以及实现：
要求用户名要用英文字母、数字、下划线或短横线组成，并且用户名长度位6~16位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
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;
}
</style>
</head>
<body>
<input type="text">
<span></span>
<script>
const reg = /^[a-zA-Z0-9-_]{6,16}/
const input = document.querySelector('input')
const span = document.querySelector('span')
input.addEventListener('blur', function () {
if (reg.test(this.value)) {
input.nextElementSibling.innerHTML = '输入正确'
span.classList.remove('error')
span.classList.add('right')
//span.className = 'right'
} else {
input.nextElementSibling.innerHTML = '输入错误'
span.classList.remove('right')
span.classList.add('error')
}
})
</script>
</body>
</html>效果图：
素材：
