js高级-正则表达式

一时失言乱红尘 2022-12-04 07:39 110阅读 0赞

# 第八章：正则表达式 #

## 正则表达式简介 ##

## 什么是正则表达式 ##

> 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

## 正则表达式的作用 ##

1.  给定的字符串是否符合正则表达式的过滤逻辑(`匹配`)
2.  可以通过正则表达式，从字符串中获取我们想要的特定部分(`提取`)
3.  强大的字符串替换能力(`替换`)

## 正则表达式的特点 ##

1.  灵活性、逻辑性和功能性非常的强
2.  可以迅速地用极简单的方式达到字符串的复杂控制
3.  对于刚接触的人来说，比较晦涩难懂

## 正则表达式的测试 ##

*  [在线测试正则][Link 1]
 *  工具中使用正则表达式
    
     *  sublime/vscode/word
     *  演示替换所有的数字

## 正则表达式的组成 ##

*  普通字符
 *  特殊字符(元字符)：正则表达式中有特殊意义的字符

示例演示：

*  `\d` 匹配数字
 *  `ab\d` 匹配 ab1、ab2

## 元字符串 ##

通过测试工具演示下面元字符的使用

## 常用元字符串 ##

<table> 
 <thead> 
  <tr> 
   <th>元字符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>\d</td> 
   <td>匹配数字</td> 
  </tr> 
  <tr> 
   <td>\D</td> 
   <td>匹配任意非数字的字符</td> 
  </tr> 
  <tr> 
   <td>\w</td> 
   <td>匹配字母或数字或下划线</td> 
  </tr> 
  <tr> 
   <td>\W</td> 
   <td>匹配任意不是字母，数字，下划线</td> 
  </tr> 
  <tr> 
   <td>\s</td> 
   <td>匹配任意的空白符</td> 
  </tr> 
  <tr> 
   <td>\S</td> 
   <td>匹配任意不是空白符的字符</td> 
  </tr> 
  <tr> 
   <td>.</td> 
   <td>匹配除换行符以外的任意单个字符</td> 
  </tr> 
  <tr> 
   <td>^</td> 
   <td>表示匹配行首的文本(以谁开始)</td> 
  </tr> 
  <tr> 
   <td>$</td> 
   <td>表示匹配行尾的文本(以谁结束)</td> 
  </tr> 
 </tbody> 
</table>

## 限定符 ##

<table> 
 <thead> 
  <tr> 
   <th>限定符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>*</td> 
   <td>重复零次或更多次</td> 
  </tr> 
  <tr> 
   <td>+</td> 
   <td>重复一次或更多次</td> 
  </tr> 
  <tr> 
   <td>?</td> 
   <td>重复零次或一次</td> 
  </tr> 
  <tr> 
   <td>{n}</td> 
   <td>重复n次</td> 
  </tr> 
  <tr> 
   <td>{n,}</td> 
   <td>重复n次或更多次</td> 
  </tr> 
  <tr> 
   <td>{n,m}</td> 
   <td>重复n到m次</td> 
  </tr> 
 </tbody> 
</table>

## 其它 ##

[] 字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思
    [^]  匹配除中括号以内的内容
    \ 转义符
    | 或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱
    () 从两个直接量中选择一个，分组
       eg：gr(a|e)y匹配gray和grey
    [\u4e00-\u9fa5]  匹配汉字

## 案例 ##

### 验证手机号： ###

^\d{ 11}$

### 验证邮编： ###

^\d{ 6}$

### 验证日期 2012-5-01 ###

^\d{ 4}-\d{ 1,2}-\d{ 1,2}$

### 验证邮箱 xxx@itcast.cn： ###

^\w+@\w+\.\w+$

### 验证IP地址 192.168.1.10 ###

^\d{ 1,3}\(.\d{ 1,3}){ 3}$

# 第九章：JavaScript 中使用正则表达式 #

## 跟正则表达式相关的方法 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
      <script> // 跟正则表达式相关的方法 // 1 RegExp对象 // test() 匹配 // exec() 提取 提取一个内容 // 2 String对象 // match() 提取 可以提取多个内容 // replace() 替换 // split() 切割 // search() var str = '张三：2500，李四：3000，王五：50000'; // var reg = /\d+/gi; // gi 全局匹配并且忽略大小写 var reg = /\d+/g; // exec() 只返回第一个匹配到的结果 如果没有匹配的内容返回null // var content = reg.exec(str); // console.log(content); // content = reg.exec(str); // console.log(content); // content = reg.exec(str); // console.log(content); // content = reg.exec(str); // console.log(content); do { var content = reg.exec(str); if (content) { console.log(content[0]); } } while (content); </script>
    </body>
    
    </html>

## 内置对象 `RegExp` ##

## 创建正则对象 ##

方式1：

var reg = new Regex('\d', 'i');
    var reg = new Regex('\d', 'gi');

方式2：

var reg = /\d/i;
    var reg = /\d/gi;

### 参数 ###

<table> 
 <thead> 
  <tr> 
   <th>标志</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>i</td> 
   <td>忽略大小写</td> 
  </tr> 
  <tr> 
   <td>g</td> 
   <td>全局匹配</td> 
  </tr> 
  <tr> 
   <td>gi</td> 
   <td>全局匹配+忽略大小写</td> 
  </tr> 
 </tbody> 
</table>

### 正则匹配：test方法 ###

// 匹配日期
    var dateStr = '2015-10-10';
    var reg = /^\d{4}-\d{1,2}-\d{1,2}$/
    console.log(reg.test(dateStr));

### 正则提取 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
      <script> // 1. 提取工资 var str = '张三：1000，李四：5000，王五：8000'; var reg = /\d+/g; // 提取多个内容 console.log(str.match(reg)); // ["1000", "5000", "8000"] // 2. 提取email地址 var str = '123123@xx.com,fangfang@valuedopinions.cn 这是其它内容 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...'; var reg = /\w+@\w+(\.\w+)+/g; console.log(str.match(reg)); // ["123123@xx.com", "fangfang@valuedopinions.cn", "286669312@qq.com", "emailenglish@emailenglish.englishtown.com", "286669312@qq.com"] // 3. 分组提取日期中的年部分 2015-5-10 var dateStr = '2015-01-25'; // 正则表达式中的()作为分组来使用，获取分组匹配到的结果用Regex.$1 $2 $3....来获取 var reg = /(\d{4})-(\d{1,2})-(\d{1,2})/; // 下面三个匹配方式任选一个 reg.test(dateStr); // reg.exec(dateStr); // dateStr.match(reg); console.log(RegExp.$1); // 第一个分组的结果：2015 console.log(RegExp.$2); // 第二个分组的结果：01 console.log(RegExp.$3); // 第三个分组的结果：25 // 4. 提取邮件中的每一部分 var str = 'xxxx@itcast.com'; // 正则表达式中的()作为分组来使用，获取分组匹配到的结果用Regex.$1 $2 $3....来获取 var reg = /(\w+)@(\w+)\.(\w+)/; reg.test(str); console.log(RegExp.$1); // 第一个分组的结果：xxx console.log(RegExp.$2); // 第一个分组的结果：itcast console.log(RegExp.$3); // 第一个分组的结果：com </script>
    </body>
    
    </html>

### split方法：使用正则分割 ###

### 正则替换：将字符串中的空格，替换为空 ###

## 案例：表单验证 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
      QQ号：<input type="text" id="txtQQ"><span></span><br> 邮箱：
      <input type="text" id="txtEMail"><span></span><br> 手机：
      <input type="text" id="txtPhone"><span></span><br> 生日：
      <input type="text" id="txtBirthday"><span></span><br> 姓名：
      <input type="text" id="txtName"><span></span><br>
    
      <script> // .........文本框的验证封装成一个函数.......... // 1 验证QQ号 addCheck('txtQQ', /^\d{5,12}$/, '请输入正确的QQ号格式'); // 2 验证电子邮箱 addCheck('txtEMail', /^\w+@\w+(\.\w+)+$/, '请输入正确的EMail号格式'); // 3 手机号 addCheck('txtPhone', /^[1-9]\d{10}$/, '请输入正确的手机号码格式'); // 4 验证日期 addCheck('txtBirthday', /^\d{4}-\d{1,2}-\d{1,2}$/, '请输入正确的日期格式') // 5 验证姓名 addCheck('txtName', /^[\u4e00-\u9fa5]{2,4}$/, '请输入2-4个汉字') // ................. // 文本框的验证封装成一个函数 // 第一个参数是元素的id // 第二个参数 正则表达式对象 RegExp // 第三个参数 是提示的文本 function addCheck(elementId, reg, tip) { var element = document.getElementById(elementId); element.onblur = function () { var span = this.nextElementSibling; // 验证 if (!reg.test(this.value)) { // 使用 this.value 获取input框输入的值 span.innerText = tip; span.style.color = 'red'; } else { span.innerText = '恭喜输入格式正确'; span.style.color = 'green'; } } } </script>
    </body>
    
    </html>

通过给元素增加自定义验证属性对表单进行验证：

// 所有的验证规则
    var rules = [
      { 
        name: 'qq',
        reg: /^\d{5,12}$/,
        tip: "请输入正确的QQ"
      },
      { 
        name: 'email',
        reg: /^\w+@\w+\.\w+(\.\w+)?$/,
        tip: "请输入正确的邮箱地址"
      },
      { 
        name: 'phone',
        reg: /^\d{11}$/,
        tip: "请输入正确的手机号码"
      },
      { 
        name: 'date',
        reg: /^\d{4}-\d{1,2}-\d{1,2}$/,
        tip: "请输入正确的出生日期"
      },
      { 
        name: 'cn',
        reg: /^[\u4e00-\u9fa5]{2,4}$/,
        tip: "请输入正确的姓名"
      }];
    
    addCheck('frm');
    
    
    //给文本框添加验证
    function addCheck(formId) { 
      var i = 0,
          len = 0,
          frm =document.getElementById(formId);
      len = frm.children.length;
      for (; i < len; i++) { 
        var element = frm.children[i];
        // 表单元素中有name属性的元素添加验证
        if (element.name) { 
          element.onblur = function () { 
            // 使用dataset获取data-自定义属性的值
            var ruleName = this.dataset.rule;
            var rule =getRuleByRuleName(rules, ruleName);
    
            var span = this.nextElementSibling;
            //判断验证是否成功
            if(!rule.reg.test(this.value) ){ 
              //验证不成功
              span.innerText = rule.tip;
              span.style.color = "red";
            }else{ 
              //验证成功
              span.innerText = "";
              span.style.color = "";
            }
          }
        }
      }
    }
    
    // 根据规则的名称获取规则对象
    function getRuleByRuleName(rules, ruleName) { 
      var i = 0,
          len = rules.length;
      var rule = null;
      for (; i < len; i++) { 
        if (rules[i].name == ruleName) { 
          rule = rules[i];
          break;
        }
      }
      return rule;
    }

[Link 1]: https://c.runoob.com/front-end/854