什么是正则表达式
- 1)什么是正则表达式
  - 快速感知正则表达式
  - 正则表达式“按位”描述规则
正则表达式
正则表达式和字符串
- 1)正则表达式的相关方法
  - test()方法
  - esec()方法
- 2)字符串的相关方法
正则表达式的应用
- 1)正则表达式的应用

什么是正则表达式

1)什么是正则表达式

快速感知正则表达式

正则表达式“按位”描述规则

正则表达式

1)正则表达式的创建

2)元字符

“元字符”是指一位指定类型的字符

元字符	功能
\d	d 匹配一个数字
\D	匹配一个非数字字符
\w	匹配一个单字字符（字母、数字或者下划线）
\W	匹配一个非单字字符
\s	匹配一个空白字符，包括空格、制表符和换行符
.	任意字符

“\”:\”([0-9a-zA-Z_]+)?\””

开头和结尾

注意事项

举例

//定义正则表达式
            var regexp1 = /^\d\d\d-\d\d\d\d-\d\d\d$/;
            var str1 = '333-3333-333';
            console.log(regexp1.test(str1));
            var regexp2=/^\w\w\w-\w\w\w\w-\w\w\w$/;
            var str2 = '333-3333-333';
            console.log(regexp2.test(str2));

字符的转义

var regex3 = /^\d\d\d\.\d\d\^\d\d\#\d\d$/;
var str3 = '122.34^87#87';
console.log(regex3.test(str3));

3)方括号表示法

小题目

            //学号字符串
            var str='y4444555';
            //用正则表达式进行检查
            console.log(/^[yb]\d{7}$/.test(str));
            //题目1：请验证某字符串是否是5位字母，大小写均可
            var str1='sdsdd';
            console.log(/^[a-zA-Z]{5}/.test(str1));        
            //题目2：请验证某字符串是否是5位，且仅有小写字母、点构成
            var str2='gjh.s';
            console.log(/^[a-z\.]{5}$/.test(str2));
            //题目3：请验证某字符串是否是4位小写字母，且最后一位不能是m字母
            var str3='asdd';
            console.log(/^[a-z]{3}[a-ln-z]/.test(str3));

4)量词

量词	意义
*	匹配前一个表达式次或多次。等价于{0,}
+	匹配前面一个表达式1次或者多次。等价于{1,}
?	匹配前面一个表达式次或者1次。等价于{0.1}
{n }	n是一个正整数，匹配了前面一个字符刚好出现了n次
{n,}	n是一个正整数，匹配前一个字符至少出现了n次
{n,m}	n和m都是整数，匹配前頭的字符至少次最多m次

//题目1：请验证字符串是否符合手机号码的规侧：11位数字，并且肯定以1开头
            var str1='12222222222';
            var regex1=/^1\d{10}$/;
            console.log(regex1.test(str1));
            //题目2：请验证某字符串是否是这样的：以字母开头，中间是任意位数字（最少1位）构成，并以字母结尾
            var str2='a22222222s';
            var regex2=/^[a-zA-Z]\d+[a-zA-Z]$/;
            console.log(regex2.test(str2));
            //题目3：请验证某字符串是否符合网址规则：以w.开头，中间是任意位的字符（字母数字下划线） ,最后以.com结尾，也可以以.com.cn结尾
            var str3='www.ssss.com';
            var regex3=/^www\.\w+.com(\.cn)?$/;
            console.log(regex3.test(str3));

5)修饰符

正则表达式和字符串

1)正则表达式的相关方法

test()方法

esec()方法

var str='asdddd34554eferf243';
var reg=/\d+/g;
var resy=reg.exec(str);
console.log(resy);
var result;
 while(result=reg.exec(str)){
         console.log(result[0]);
};

2)字符串的相关方法

        var str = 'abc123def4567ghi89';
        // search()方法，很像indexOf()，返回查找到的第一个下标，如果找不到就是-1
        var result1 = str.search(/\d+/g);
        var result2 = str.search(/m/g);
        console.log(result1);       // 3
        console.log(result2);       // -1
        // match()方法，返回查找到的数组，找不到就是null
        var result3 = str.match(/\d+/g);
        console.log(result3);       // ["123", "4567", "89"]
        // replace()方法，进行替换
        var result4 = str.replace(/[a-z]+/g, '*');      // 注意+表示贪婪的，尽可能多的连续匹配小写字母
        console.log(result4);       // *123*4567*89
        // split()方法，进行字符串拆为数组
        var result5 = str.split(/\d+/g);
        console.log(result5);       // ["abc", "def", "ghi", ""]

正则表达式的应用

1)正则表达式的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .warning {
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <p>
            请输入中文姓名：
            <input type="text" id="nameField">
            <span class="warning" id="nameWarning">输入的姓名不合法</span>
        </p>
        <p>
            请输入手机号码：
            <input type="text" id="telField">
            <span class="warning" id="telWarning">输入的手机号码不合法</span>
        </p>
        <p>
            请输入Email：
            <input type="text" id="emailField">
            <span class="warning" id="emailWarning">输入的Email不合法</span>
        </p>
    </div>
    <script>
        var nameField = document.getElementById('nameField');
        var telField = document.getElementById('telField');
        var emailField = document.getElementById('emailField');
        var nameWarning = document.getElementById('nameWarning');
        var telWarning = document.getElementById('telWarning');
        var emailWarning = document.getElementById('emailWarning');
        // 当文本框失去焦点，就是光标不在文本框中了
        nameField.onblur = function () {
            // 得到姓名
            var name = nameField.value;
            if (/^[\u4E00-\u9FA5]{2,4}$/.test(name)) {
                // 如果通过校验
                nameWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                nameWarning.style.display = 'inline';
            }
        };
        telField.onblur = function () {
            // 得到电话
            var tel = telField.value;
            if (/^1\d{10}$/.test(tel)) {
                // 如果通过校验
                telWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                telWarning.style.display = 'inline';
            }
        };
        emailField.onblur = function () {
            // 得到email
            var email = emailField.value;
            // 合法的email都是abc_def123@abc.net
            if (/^\w{2,}\@\w{2,}\.[a-z]{2,4}(\.[a-z]{2,4})?$/.test(email)) {
                // 如果通过校验
                emailWarning.style.display = 'none';
            } else {
                // 如果没有通过校验
                emailWarning.style.display = 'inline';
            }
        };
    </script>
</body>
</html>