正则表达式概述
在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。在JS中正则表达式也是一种对象。
正则表达式在JS中的使用
- 创建正则表达式
- 利用RegExp对象来创建
var regexp = new RegExp(/123/);
console.log(regexp);
- 利用字面量创建
var rg = /123/;
console.log(rg.test(123));
- 测试正则表达式 test
test()正则对象方法，用于检测字符串是否符合该规则，该对象会返回true或false，其参数是测试字符串
regexObj.test(str);
- regexObj 是写的正则表达式
- str 是我们要测试的文本
- 就是检测 str 文本是否符合我们写的正则表达式规范
正则表达式中的特殊字符
正则表达式的组成
一个正则表达式可以由简单的字符串构成，比如/abc/,也可以由简单的字符串和特殊字符组合，比如/ab*c/。其中特殊字符称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^、$、+ 等。
- 边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行尾的文本（以谁结束） |
var reg = /abc/; 只要包含 abc 字符串，返回的都是 true
console.log(reg.test("abc")); // true
console.log(reg.test("abcd")); // true
console.log(reg.test("abcde")); // true
var reg = /^abc/; // 以 abc 开头返回 true
console.log(reg.test("abc")); // true
console.log(reg.test("abcd")); // true
console.log(reg.test("aabcde")); // false
var reg = /abc$/; // 以 abc 结尾返回 true
console.log(reg.test("abcc")); // false
console.log(reg.test("abcdd")); // false
console.log(reg.test("aababc")); // true
var reg = /[abc]/; // [] 只要匹配里面其中一个字符就返回 true
console.log(reg.test("aa")); // true
console.log(reg.test("bb")); // true
console.log(reg.test("cc")); // true
- 字符类：只要匹配其中一个字符
var reg = /^[abc]$/; // 加上边界符，三个只能选择一个返回 true
console.log(reg.test("a")); // true
console.log(reg.test("b")); // true
console.log(reg.test("abc")); // false
var reg = /^[a-z]$/; // a-z 中任意一个字母返回 true
console.log(reg.test("a")); // true
console.log(reg.test("f")); // true
console.log(reg.test("A")); // false
var reg = /^[a-zA-Z0-9_-]$/; // 字符组合
console.log(reg.test("a")); // true
console.log(reg.test("Z")); // true
console.log(reg.test("1")); // true
var reg = /^[^a-zA-Z0-9_-]$/; // [] 里面有 ^ 表示取反
console.log(reg.test("a")); // false
console.log(reg.test("Z")); // false
console.log(reg.test("!")); // true
- 量词符
| 量词 | 说明 |
|---|---|
| * | 重复 0 次或更多次 // (>=0) |
| + | 重复 1 次或更多次 // (>=1) |
| ? | 重复 0 次或 1 次 // (1 |
| {n} | 重复 n 次 // {3} 就是3次 |
| {n,} | 重复 n 次或更多次 {3,} 大于等于 3 次 |
| {n,m} | 重复 n 到 m 次 {3,16} 大于等于 3 ，小于等于16 |
var reg = /^a*$/; // >=0 次
console.log(reg.test("")); // true
console.log(reg.test("a")); // true
console.log(reg.test("aaaa")); // true
var reg = /^a+$/; // >=1 次
console.log(reg.test("")); // false
console.log(reg.test("a")); // true
console.log(reg.test("aaaa")); // true
var reg = /^a?$/; // 1||0 次
console.log(reg.test("")); // true
console.log(reg.test("a")); // true
console.log(reg.test("aaaa")); // false
var reg = /^a{3}$/; // 3 次
console.log(reg.test("")); // false
console.log(reg.test("a")); // false
console.log(reg.test("aaa")); // true
var reg = /^a{3,}$/; // 大于等于 3 次
console.log(reg.test("")); // false
console.log(reg.test("aaa")); // true
console.log(reg.test("aaaaa")); // true
var reg = /^a{3,5}$/; // 大于等于 3 次，小于等于 5 次
console.log(reg.test("")); // false
console.log(reg.test("aaa")); // true
console.log(reg.test("aaaaa")); // true
console.log(reg.test("aaaaaa")); // false
var reg = /^[a-zA-Z0-9_-]{1,6}$/; // 组合
console.log(reg.test("aA123_")); // true
console.log(reg.test("ZAdfg123")); // false
console.log(reg.test("1")); // true
案例1：用户名表单验证
- 预定义类：某些常见模式的简写形式
| 预定类 | 说明 |
|---|---|
| \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] |
案例2：表单验证
正则表达式中的替换
- replace 替换
stringObject.replace(regexp/substr,repalcement)
1. 第一个参数：被替换的正则表达式或字符串
2. 第二个参数：替换为的字符串
3. 返回值是一个替换完毕的新字符串
- 正则表达式参数
/表达式/(switch)
switch有三种值：
1. g ：全局匹配
2. i：忽略大小写
3. gi：全局匹配 + 忽略大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<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(/前端|老王/g, "***");
};
</script>
</body>
</html>
参考：
