JavaScript 正则表达式

1. 正则表达式概述

1.1 什么是正则表达式

正则表达式 是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象

作用：

1. 表单验证
2. 过滤敏感词
3. 提取关键字

1.2 正则表达式的特点

1. 灵活性、逻辑性和功能性非常的强
2. 可以迅速地用极简单的方式达到字符串的复杂控制
3. 对于刚接触的人来说，比较晦涩难懂
4. 要学会使用正则表达式并且根据实际情况修改正则表达式

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)

1. regexObj 是写的正则表达式
2. str 是我们要测试的文本
3. 就是检测 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 括号总结

1. 大括号：量词符，里面表示重复次数
2. 中括号：字符合集。匹配方括号中的任意字符
3. 小括号：表示优先级

<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)

1. 第一个参数：被替换的字符串 或者 正则表达式
2. 第二个参数：替换为的字符串
3. 返回值是一个替换完毕的新字符串

 <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：全局匹配+忽略大小写