正则表达式
- 能够说出正则表达式的作用
- 能够写出简单的正则表达式
- 能够使用正则表达式对表单进行验证
- 能够使用正则表达式替换内容
- 正则表达式概述
- 正则表达式在JavaScript中的使用
- 正则表达式中的特殊字符
- 正则表达式中的替换
1.正则表达式概述
1.1 什么是正则表达式
正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。
正则表达式被用来检索、替换那些符合某个模式的文本。
- 输入框中可以输入中文（匹配）
- 敏感词替换（替换）
- 从字符串中获取我们特定的部分（提取）
1.2正则表达式的特点
- 灵活性、逻辑性和功能性非常的强
- 可以迅速的用，及其简单的方式达到字符的复杂控制
- 对于刚接触的人来说，比较晦涩难懂。
- 实际开发，一般都是直接复制粘贴写好的正则表达式，但是会要求我们会使用正则表达式并且根据实际情况修改正则表达式。比如用户名：/^[a-z0-9_-]{3,16}$/
2.正则表达式在JavaScript中的使用
2.1 创建正则表达式
在JavaScript中可以通过两种方式创建正则表达式：
- 通过调用RegExp对象来创建正则表达式
- 通过字面量来创建正则表达式
//1.通过调用RegExp对象来创建正则表达式
var regexp = new RegExp(/123/)
console.log(regexp) // /123/
//2.通过字面量 来创建正则表达式
var reg = /123/
console.log(reg) // /123/
2.2RegExp 对象方法
(1)测试正则表达式 test()
test()正则表达式方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是待测试字符串。
var reg = /123/
console.log(reg) // /123/
console.log(reg.test("12345")) //true
console.log(reg.test("abc")) //false
(2) 测试正则表达式exec()
RegExpObject.exec(string) 返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
var str = "Visit W3School, W3School is a place to study web technology.";
var patt = new RegExp("W3School","g");
var result;
while ((result = patt.exec(str)) != null) {
console.log(result); //返回匹配的结果 格式是数组
console.log(patt.lastIndex); //返回匹配结果出现的最末位置
}
输出结果：
3 正则表达式中的特殊字符
一个正则表达式可以由简单的字符构成，比如/abc/，也可以是简单和特殊的字符的组合，比如/ab*c/。 其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用字符，如^、$、+等
3.1 特殊字符非常多，可以参考：
- MDN：
- Jquery手册：正则表达式部分
- 正则测试工具：
3.2 边界符： ^ $
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本(以谁开始) |
| $ | 表示匹配行尾的文本(以谁结尾) |
如果^和$在一起，表示必须是精确匹配。
//边界符 ^ $
//正则表达式里面不需要加引号 不管是数字型还是字符串型
var rg= /abc/ //字符串中包含abc就可以
console.log(rg.test("aabcd")) //true
var rg2=/^abc/ //说明只能以abc开头
console.log(rg2.test("abc")) //true
console.log(rg2.test("aabc")) //false
var rg3=/^abc$/ //说明字符串只能是abc，因为以abc开始以abc结尾，长度为3
console.log(rg3.test("abc")) //true
console.log(rg3.test("abcabc")) //false
3.3 字符类[ ]：
[ ] 表示有一系列字符是可供选择的，只要匹配其中的一个就可以了，被称为字符类。 所有可供选择的字符都在方括号内。
[^] --方括号内部值取反符,不管里面有多少个值都取反。
/^[^abc]$/.test("a") //false
/^[^abc]$/.test("Q") //true
/^[^abc]$/.test("b") //false
说明：第一个^表示的边界符，第二个^表示的取反。
| 标示符 | 说明 |
|---|---|
| /[abc]/ | 表示字符串中包含 a 、 b 、c任意一个就可以 |
| /^[abc]$/ | 表示字符串 只能是三选一 |
| /^[a-z]$/ | 表示字符串只能是26个字符中的任意一个 |
| /^[a-z0-9A-Z-_]$/ | 表示字符串只能是a-z A-Z 0-9 - _这些中的一个 |
var rg = /[abc]/ // 表示只要字符串中包含 a 或者 b 或者c东西对的
console.log(rg.test("accc")) //true
console.log(rg.test("red")) //false
var rg1 = /^[abc]$/ // 表示只要字符串 只能是三选一
console.log(rg1.test("a")) //true
console.log(rg1.test("c")) //true
console.log(rg1.test("abc")) //false
var rg2 = /^[a-z]$/ //表示字符串是26个字符中的任意一个
console.log(rg2.test("z")) //true
console.log(rg2.test("az")) //false
var rg3 = /^[a-z0-9A-Z-_]$/ //表示字符串中是a-z A-Z 0-9 - _这些中的一个
console.log(rg3.test("Z")) //true
console.log(rg3.test("A_")) //false
var rg4 = /^[^a-z0-9A-Z-_]$/ //表示字符串不能是a-z A-Z 0-9 - _这些中的一个
console.log(rg4.test("A")) //false
console.log(rg4.test("?")) //true
3.4 量字符 * + ？ {n}
量字符用来设定某些模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 重复0次或者多次 |
| + | 重复1次或者多次 |
| ？ | 重复0次或者1次 |
| {n} | 重复n次 |
| {n,} | 重复n次或者更多次 |
| {n,m} | 重复n次到m次 |
var reg=/^a*$/ // * 重复0次或者多次
console.log(reg.test("")) //true
console.log(reg.test("a")) //true
console.log(reg.test("aaa")) //true
var reg1=/^a+$/ // + 重复1次或者多次
console.log(reg1.test("")) //false
console.log(reg1.test("a")) //true
console.log(reg1.test("aaa")) //true
var reg2=/^a?$/ // ? 重复0次或者1次
console.log(reg2.test("")) //true
console.log(reg2.test("a")) //true
console.log(reg2.test("aaa")) //false
var reg3=/^a{3}$/ // {n} 重复n次
console.log(reg3.test("")) //false
console.log(reg3.test("a")) //false
console.log(reg3.test("aaa")) //true
var reg4=/^a{3,}$/ // {n,} 重复n次或者更多次
console.log(reg4.test("")) //false
console.log(reg4.test("a")) //false
console.log(reg4.test("aaa")) //true
console.log(reg4.test("aaaa")) //true
var reg5=/^a{3,4}$/ // {n,m} 重复n次到m次
console.log(reg5.test("")) //false
console.log(reg5.test("a")) //false
console.log(reg5.test("aaa")) //true
console.log(reg5.test("aaaa")) //true
console.log(reg5.test("aaaaa")) //false
var rg3 = /^[a-z0-9A-Z-_]{3,4}$/
console.log(rg3.test("aaz")) //true
console.log(rg3.test("abcs")) //true
console.log(rg3.test("abdsf")) //false
案例：用户名输入格式是否正确
<head>
<style>
.right{background-color: green;}
.left{background-color: red;}
</style>
</head>
<body>
<input type="text" name="用户名" id=""><span>请输入用户名</span>
<script>
var reg = /^[a-zA-Z0-9-_]{6,16}$/
var uname = document.querySelector("input")
var uspan = document.querySelector("span")
uname.onblur=function(){
if(reg.test(this.value)){
uspan.setAttribute("class","right")
uspan.innerHTML="用户名格式正确"
}else{
uspan.setAttribute("class","left")
uspan.innerHTML="用户名格式错误"
}
}
</script>
</body>
3.5 括号总结:{} [] ()
- 大括号 量词符{}：里面表示重复的次数
- 中括号 字符集合[]：匹配方括号的任意字符
- 小括号 表示优先级()
var reg=/^abc{3}$/
console.log(reg.test("abc")) //false
console.log(reg.test("abcabcabc")) //false
console.log(reg.test("abccc")) //true
var reg2=/^(abc){3}$/
console.log(reg2.test("abc")) //false
console.log(reg2.test("abcabcabc")) //true
console.log(reg2.test("abccc")) //false
var reg5 = /^[abc]{3}$/
console.log(reg5.test("abc")) //true abc三个中的任意一个出现三次都是对的
console.log(reg5.test("abccc")) //false
console.log(reg5.test("aaa")) //true
3.6 预定义类
预定义类指的是某些常见匹配模式的简写方式
| 预定类 | 说明 |
|---|---|
| \d | 匹配0-9之间的任一数字 相当于[0-9] |
| \D | 匹配0-9之外的字符 相当于[^0-9] |
| \w | 匹配任意的字母、数字、下划线 相当于[A-Zz-z0-9_] |
| \W | 匹配除字母、数字、下划线的字符 相当于[^A-Zz-z0-9_] |
| \s | 匹配空格（包括换行符、制表符、空格符等）相当于[\t\n\v\f] |
| \S | 匹配非空格（包括换行符、制表符、空格符等）的字符 相当于[^\t\n\v\f] |
<script>
var reg=/\d/
console.log(reg.test("123")) //true
console.log(reg.test("abc")) //false
</script>
