什么是正则表达式

正则表达式(regular expression)描述了字符串的"构成模式"，经常被用于检查字符串是否符合预定的格式要求
正则表达式"按位"描述规则，是指它是一位一位的描述字符串的构成形式
- 比如检查字符串是不是这样的：以字母开头，然后是3个数字，最后以字母n结尾

正则表达式的基本使用

1.正则表达式的创建

使用/内容/的语法形式，可以快速创建正则表达式
也可以使用new RegExp('内容)的形式，创建正则表达式

使用typeof运算符检查正则表达式的类型，结果是object

javascript 复制代码

 //创建正则表达式方法1
  var regexp1 = /^\d{6}$/;
  //创建正则表达式方法2(不推荐)
  var regexp2 = new RegExp('\\d{6}$');

  var str = '555666';
  console.log(regexp1.test(str)); //true
  console.log(regexp2.test(str));//true

  console.log(typeof regexp1); // object
  console.log(typeof regexp2); // object

2.元字符 ★

指的是一位指定类型的字符
- ^ : 匹配开头
- $ : 匹配结尾
注意事项
- 如果使用new RegExp()写法，反斜杠需要多写一个
  - 比如 /^\d\$/ 和 new RegExp('^\\d$') 是相同的意思
字符的转义
- 在特殊字符之前的反斜杠\表示下一个字符不是特殊字符，应该按照字面理解
- 不管一个符号有没有特殊意义，都可以在其之前加上一个反斜杠\以确保它表达的是这个符号本身

3.方括号表示法 ★

使用方括号，比如[xyz],可以创建一个字符集合，表示匹配方括号中的任意字符
- 比如某学校的学号规定：第1位是一个字母，b表示本科生，y表示研究生，后面是7位数字，用正则表示为：/^[by]\d{7}$/
可以使用短横-来指定一个字符范围，^表示否定元字符

4.量词 ★

5.修饰符

修饰符也叫做标志(flags),用于使用正则表达式实现高级搜索
- i 不区分大小写搜索
- g 全局搜索
修饰符的使用
- var re = /m/gi;
- var re = new RegExp('m','gi');

正则表达式和字符串

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

代码示例

javascript 复制代码

 var str = 'abc123bdd456dfg789';
  var regexp = /\d+/g;//+表示贪婪的,尽可能多地匹配
  var result ;
  while(result = regexp.exec(str)){
     console.log(result);
  }

2.字符串相关方法

javascript 复制代码

 var str = 'abc123def4567';

    // search()方法,很想indexOf()
    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']

    //replace()方法,进行替换
    var result4 = str.replace(/[a-z]+/g,'*');
    console.log(result4);//*123*4567

    // split()方法,将字符串拆为数组
    var result5 = str.split(/\d+/g);
    console.log(result5);//['abc', 'def', '']

温馨提示: 学会用百度去搜索一些常见的正则表达式

用正则表达式进行表单验证

javascript 复制代码

<!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>```