JavaScript 正则表达式
1. 正则表达式概述
1.1 什么是正则表达式
正则表达式 是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象
作用：
- 表单验证
- 过滤敏感词
- 提取关键字
1.2 正则表达式的特点
- 灵活性、逻辑性和功能性非常的强
- 可以迅速地用极简单的方式达到字符串的复杂控制
- 对于刚接触的人来说，比较晦涩难懂
- 要学会使用正则表达式并且根据实际情况修改正则表达式
2. 正则表达式在 JavaScript 中的使用
2.1 创建正则表达式
在 JavaScript 中，可以通过两种方式创建一个正则表达式
2.1.1 通过调用 RegExp 对象的构造函数创建
var 变量名 = new RegExp(/表达式/);
2.1.2 通过字面量创建
var 变量名 = /表达式/;
2.2 测试正则表达式 test
test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串
regexObj.test(str)
- regexObj 是写的正则表达式
- str 是我们要测试的文本
- 就是检测 str 文本是否符合我们写的正则表达式规范
3. 正则表达式中的特殊字符
3.1 正则表达式的组成
一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊的字符的组合，比如 /ab*c/。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如^、$、+ 等
特殊字符非常多，可以参考：
- MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
- JQuery 手册：正则表达式部分
- 正则测试工具：http://tool.oschina.net/regex
3.2 边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行尾的文本（以谁结束） |
如果 ^ 和 $ 在一起，表示必须是精确匹配
<script>
var rg = /abc/;
// /abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test("abc")); //true
console.log(rg.test("abcd")); //true
console.log(rg.test("aabc")); //true
console.log("----------------------");
var reg = /^abc/; //开头为abc
console.log(reg.test("abc")); //true
console.log(reg.test("abcd")); //true
console.log(reg.test("aabc")); //false
console.log("----------------------");
var reg1 = /^abc$/; //精确匹配，必须是abc字符串
console.log(reg1.test("abc")); //true
console.log(reg1.test("abcd")); //false
console.log(reg1.test("abcabc")); //false
console.log("----------------------");
var reg2 = /abc$/; //结尾为abc
console.log(reg2.test("abc")); //true
console.log(reg2.test("abcd")); //false
console.log(reg2.test("abcabc")); //true
</script>
3.3 字符类
字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内
3.3.1 [ ] 表示有一系列字符可供选择，只要匹配其中一个就可以了
<script>
var rg = /[abc]/; // 只要包含有a或b或c都返回true
console.log(rg.test("abc")); //true
console.log(rg.test("ab")); //true
console.log(rg.test("c")); //true
console.log(rg.test("def")); //false
console.log("------------------------");
var rg1 = /^[abc]$/; // 三选一，只有是a或b或c 这三个字母才返回true
console.log(rg1.test("aa")); //false
console.log(rg1.test("a")); //true
console.log(rg1.test("b")); //true
console.log(rg1.test("c")); //true
console.log(rg1.test("abc")); //false
</script>
3.3.2 [-] 方括号内部 范围符 -
<script>
var rg2 = /^[a-z]$/; //26个英文小写字母任何一个字母返回true
console.log(rg2.test("g")); //true
console.log(rg2.test("Z")); //false
</script>
3.3.3 字符组合
<script>
// 字符组合
var rg3 = /^[a-zA-Z0-9_-]$/;
console.log(rg3.test("a")); //true
console.log(rg3.test("B")); //true
console.log(rg3.test(9)); //true
console.log(rg3.test("_")); //true
console.log(rg3.test("!")); //false
</script>
3.3.4 [^] 方括号内部 取反符 ^
<script>
// 如果中括号里面有^，表示取反的意思
var rg3 = /^[^a-zA-Z0-9_-]$/;
console.log(rg3.test(9)); //false
console.log(rg3.test("_")); //false
console.log(rg3.test("!")); //true
</script>
3.4 量词符
量词符用来设定某个模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ？ | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
<script>
// 量词符：用来设定某个模式出现的次数
// 简单理解：就是让下面的a这个字符重复多少次
// var reg=/^a$/;
// * 相当于 >=0
var reg = /^a*$/;
console.log(reg.test("")); //true
console.log(reg.test("a")); //true
console.log(reg.test("aaaa")); //true
console.log("-----------------");
// + 相当于 >=1
var reg = /^a+$/;
console.log(reg.test("")); //false
console.log(reg.test("a")); //true
console.log(reg.test("aaaa")); //true
console.log("-----------------");
// ? 相当于 1||0
var reg = /^a?$/;
console.log(reg.test("")); //true
console.log(reg.test("a")); //true
console.log(reg.test("aaaa")); //false
console.log("-----------------");
// {3 } 就是重复出现3次
var reg = /^a{3}$/;
console.log(reg.test("")); //false
console.log(reg.test("a")); //false
console.log(reg.test("aaa")); //true
console.log("-----------------");
// {3, } 大于等于3
var reg = /^a{3,}$/;
console.log(reg.test("")); //false
console.log(reg.test("aaa")); //true
console.log(reg.test("aaaaa")); //true
console.log("-----------------");
// {3，7} 大于等于3且小于等于7
var reg = /^a{3,7}$/;
console.log(reg.test("aaaaaa")); //true
console.log(reg.test("aaa")); //true
console.log(reg.test("aaaaaaaaaaa")); //false
console.log("-----------------");
</script>
3.5 括号总结
- 大括号：量词符，里面表示重复次数
- 中括号：字符合集。匹配方括号中的任意字符
- 小括号：表示优先级
<script>
// 中括号
var reg = /^[abc]$/; //a||b||c
// 大括号
var reg = /^abc{3}$/; // 只是让c重复三次 abccc
console.log(reg.test("abc")); //false
console.log(reg.test("abcabcabc")); //false
console.log(reg.test("abccc")); //true
console.log("-----------------------");
// 小括号
var reg = /^(abc){3}$/; // 让abc重复三次
console.log(reg.test("abc")); //false
console.log(reg.test("abcabcabc")); //true
console.log(reg.test("abccc")); //false
</script>
在线测试：https://c.runoob.com/codedemo/6230/
3.6 预定义类
预定义类指的是某些常见模式的简写方式
| 预定类 | 说明 |
|---|---|
| \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] |
注意：正则里面的或者符号 |
4. 正则表达式中的替换
4.1 replace 替换
replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或者一个正则表达式
stringObject.replace(regexp/substr,replacement)
- 第一个参数：被替换的字符串 或者 正则表达式
- 第二个参数：替换为的字符串
- 返回值是一个替换完毕的新字符串
<script>
// 替换 replace
var str = "andy和red";
var newStr = str.replace("andy", "baby");
// 或者
var newStr = str.replace(/andy/, "baby");
console.log(newStr); //baby和red
</script>
案例：替换关键词
<textarea name="" id="message"></textarea> <button>提交</button>
<div></div>
<script>
var text = document.querySelector("textarea");
var btn = document.querySelector("button");
var div = document.querySelector("div");
btn.onclick = function () {
div.innerHTML = text.value.replace(/激情/, "**");
};
</script>
4.2 正则表达式参数
/表达式/[switch]
switch（也称为修饰符）按照什么样的模式来匹配，有三种值：
- g：全局匹配
- i：忽略大小写
- gi：全局匹配+忽略大小写