正则表达式

# 正则表达式

# 1. 正则表达式概述

# 1.1 什么是正则表达式

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

正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等

其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript正则表达式完成表单验证。

# 1.2 正则表达式的特点

灵活性、逻辑性和功能性非常的强
可以迅速地用极其简单的方式达到字符串的复杂控制
对于刚接触的人来说，比较晦涩难懂。比如：^\w+([-+.][w+)*@\w+([-.]w+)*L.w+([-J][W+)*$
实际开发，一般都是直接复制写好的正则表达式.但是要求会使用正则表达式并且根据实际情况修改正则表达式.比如用户名：/^[a-zO-9_-]{[3,16}$/

# 2. 正则表达式在`Javascript` 中的使用

# 2.1 创建正则表达式

在JavaScript中，可以通过两种方式创建一个正则表达式

1. 通过调用 RegExp 的对象的构造函数创建

var变量名= new RegExp (/表达式/ );

# 2.2 测试正则表达式 `test`

test()正则对象方法，用于检测字符串是否符合该规则，该对象会返回true或false，其参数是测试字符串

regexObj.text(str)

regexObj 是写的正则表达式
str 我们要测试的文本
就是检测 str 文本是否符合我们写的正则表达式规范

# 3. 正则表达式中的特殊字符

# 3.1 正则表达式的组成

一个正则表达式可以由简单的字符构成，比如/abc/，也可以是简单和特殊字符的组合，比如/ab*c/。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如^、$、＋等。

特殊字符非常多，可以参考︰

MDN ： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_ExpressionsjQuery
手册：正则表达式部分
正则测试工具： http://tool.oschina.net/regex

# 3.2 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

代码示例

  // 边界符 ^ $
    var rg = /abc/;   // 正则表达式里面不需要加引号  不管是数字型还是字符串型
    //  /abc/ 只要包含有 abc 这个字符串返回的都是 true
    console.log(rg.test('abc'));   // true
    console.log(rg.test('aabc'));   // true
    console.log(rg.test('abccd'));   // true
    console.log('---------------------');
    var reg = /^abc/
    console.log(reg.test('abc'));   // true
    console.log(reg.test('abcd'));  // true
    console.log(reg.test('aabcd')); // false
    console.log('---------------------');
    var reg1 = /^abc$/   // 精确匹配 要求必须是 abc 字符串才符合规范
    console.log(reg1.test('abc'));  // true
    console.log(reg1.test('abcc')); // false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 3.3 字符类

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

[] 表示有一系列可供选择只要匹配其中一个就可以了
[-] 方括号内部范围符-

代码示例

    // var rg = /abc/ 只要包含 abc 就行
    // 字符类：[] 表示有一系列可供选择 只要匹配其中一个就可以了
    var rg = /[abc]/  // 只要包含有 a 或者 包含有 b 或者包含有 c 都返回 true
    console.log(rg.test('andy'));    // true
    console.log(rg.test('baby'));    // true
    console.log(rg.test('color'));   // true
    console.log(rg.test('red'));     // 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
    console.log('-----------------------');
    var reg = /^[a-z]$/   // 26个英文字母 任何一个字母返回 true - 表示 a 到 z 的范围
    console.log(reg.test('a'));        // true
    console.log(reg.test('z'));        // true
    console.log(reg.test('zz'));       // false
    console.log(reg.test(1));          // false
    console.log(reg.test('A'));        // false
    console.log('-----------------------');
    var reg1 = /^[a-zA-Z0-9_-]$/  // 26个英文字母(大写 小写都可以)  任何一个字母返回 true -表示 a 到 z 的范围
    console.log(reg1.test('a'));      // true
    console.log(reg1.test('B'));      // true
    console.log(reg1.test(9));        // true
    console.log(reg1.test('-'));      // true
    console.log(reg1.test('+'));      // false
    // 如果中括号里面有 ^ 表示取反的意思 千万和我们边界符 ^ 别混淆
    var reg1 = /^[^a-zA-Z0-9_-]$/
    console.log(reg1.test('a'));      // false
    console.log(reg1.test('B'));      // false
    console.log(reg1.test(9));        // false
    console.log(reg1.test('-'));      // false
    console.log(reg1.test('+'));      // true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 3.4 量词符

量词符用来设定某个模式出现的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复 n 次
{n,}	重复 n 次或更多次
{n,m}	重复 n 到 m 次

代码示例 1

 // 量词符：用来设定某个模式出现的次数
    // 简单理解：就算让下面a这个字符重复多少次

    // * 相当于 >= 0 可以出现0次或者很多次
    // var reg = /^a*$/
    // console.log(reg.test(''));        // true
    // console.log(reg.test('a'));       // true
    // console.log(reg.test('aaaa'));    // true
    // console.log('---------------------');

    // + 相当于 >=1 可以出现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 reg1 = /^a?$/
    // console.log(reg1.test(''));         // true
    // console.log(reg1.test('a'));        // true
    // console.log(reg1.test('aaa'));      // false
    // console.log('---------------------');

    // {3} 就是重复三次
    // var reg2 = /^a{3}$/
    // console.log(reg2.test(''));         // false
    // console.log(reg2.test('a'));        // false
    // console.log(reg2.test('aaa'));      // true
    // console.log('---------------------');

    // {3, } 大于等于 3
    // var reg3 = /^a{3,}$/
    // console.log(reg3.test(''));         // false
    // console.log(reg3.test('a'));        // false
    // console.log(reg3.test('aaa'));      // true
    // console.log(reg3.test('aaaa'));     // true
    // console.log('---------------------');

    // {3, 16} 大于等于 3 并且 小于等于 6
    var reg4 = /^a{3,6}$/
    console.log(reg4.test(''));                  	// false
    console.log(reg4.test('a'));                 	// false
    console.log(reg4.test('aaa'));               	// true
    console.log(reg4.test('aaaaaaaaaaaaaaa'));      // false
    console.log('---------------------');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

代码示例 2

    // 量词是设定某个模式出现的次数
    var reg = /^[a-zA-Z0-9_-]{6,16}$/
    // 这个模式用户只能输入英文字母 数字 下划线 短横线 但是有边界符和[] 这就限定了只能多选
    // {6,16}   中间不要有空格
    console.log(reg.test('a'));
    console.log(reg.test('8'));
    console.log(reg.test('18'));
    console.log(reg.test('aa'));
    console.log('----------------------');
    console.log(reg.test('andy-red'));
    console.log(reg.test('tom-jerry'));
    console.log(reg.test('tom007'));

1
2
3
4
5
6
7
8
9
10
11
12

案例：用户名验证

功能需求：

如果用户名输入合法,则后面提示信息为:用户名合法,并且颜色为绿色
如果用户名输入不合法,则后面提示信息为:用户名不符合规范,并且颜色为绿色

<body>
  <input type="text" class="uname"> <span>请输入用户名</span>
  <script>
    //  量词是设定某个模式出现的次数
    var reg = /^[a-zA-Z0-9_-]{6,16}$/;
    var uname = document.querySelector('.uname')
    var span = document.querySelector('span')
    uname.onblur = function () {
      if (reg.test(this.value)) {
        span.className = 'right'
        span.innerHTML = '用户名格式输入正确'
      } else {
        span.className = 'wrong'
        span.innerHTML = '用户名格式输入有误'
      }
    }

  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 3.5 括号总结

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

可以在线测试: https://c.runoob.com/

代码示例

// 中括号 字符集合 匹配方括号中的任意字符
var reg = /^[abc]$/
// a 也可以 b也可以 c 可以 a || b || c

// 大括号 量词符 里面表示重复次数
// var reg1 = /^abc{3}$/     // 它只是让c重复三次
// console.log(reg1.test('abc'));              // false
// console.log(reg1.test('abcabcabc'));        // false
// console.log(reg1.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 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]`

代码示例

// 座机号码验证：   全国座机号码  两种格式：    010-12345678  或者 0530-1234567
// 正则里面的或者 符号 |
// var reg = /^\d{e}-\d{8}| \d{4}-\d{7}$/

1
2
3