正则表达式

Posted 2020-11-16 superjishere

正则表达式

• 了解正则表达式基本语法

• 能够使用javascript的正则对象

正则表达式简介

什么是正则表达式

正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

正则表达式的作用

1. 给定的字符串是否符合正则表达式的过滤逻辑(匹配)

2. 可以通过正则表达式，从字符串中获取我们想要的特定部分(提取)

3. 强大的字符串替换能力(替换)

正则表达式的特点

1. 灵活性、逻辑性和功能性非常的强

2. 可以迅速地用极简单的方式达到字符串的复杂控制

3. 对于刚接触的人来说，比较晦涩难懂

正则表达式的测试

• 在线测试正则

• 工具中使用正则表达式

  • sublime/vscode/word

  • 演示替换所有的数字

正则表达式的组成

• 普通字符abc 123

• 特殊字符(元字符)：正则表达式中有特殊意义的字符d w

示例演示：

• d 匹配数字

• abd 匹配 ab1、ab2

元字符

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

常用元字符串

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

限定符

限定符	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

其它

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

案例

验证手机号：

 ^d{11}$

验证邮编：

 ^d{6}$

验证日期 2012-5-01

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

验证邮箱 [e-mail]：

 ^w+@w+.w+$

验证IP地址 192.168.1.10

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

JavaScript 中使用正则表达式

创建正则对象

方式1：

 var reg = new RegExp(‘d‘, ‘i‘);
 var reg = new RegExp(‘d‘, ‘gi‘);

方式2：

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

参数

标志	说明
i	忽略大小写
g	全局匹配
gi	全局匹配+忽略大小写

正则匹配

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

正则提取

 // 1. 提取工资
 var str = "张三：1000，李四：5000，王五：8000。";
 var array = str.match(/d+/g);
 console.log(array);
 ?
 // 2. 提取email地址
 var str = "[e-mail],[e-mail] [e-mail] 2、[e-mail] [e-mail]...";
 var array = str.match(/w+@w+.w+(.w+)?/g);
 console.log(array);
 ?
 // 3. 分组提取  
 // 3. 提取日期中的年部分  2015-5-10
 var dateStr = ‘2016-1-5‘;
 // 正则表达式中的()作为分组来使用，获取分组匹配到的结果用Regex.$1 $2 $3....来获取
 var reg = /(d{4})-d{1,2}-d{1,2}/;
 if (reg.test(dateStr)) {
   console.log(RegExp.$1);
 }
 ?
 // 4. 提取邮件中的每一部分
 var reg = /(w+)@(w+).(w+)(.w+)?/;
 var str = "[e-mail]";
 if (reg.test(str)) {
   console.log(RegExp.$1);
   console.log(RegExp.$2);
   console.log(RegExp.$3);
 }

正则替换

 // 1. 替换所有空白
 var str = "   123AD  asadf   asadfasf  adf ";
 str = str.replace(/s/g,"xx");
 console.log(str);
 ?
 // 2. 替换所有,|，
 var str = "abc,efg,123，abc,123，a";
 str = str.replace(/,|，/g, ".");
 console.log(str);

案例：表单验证

 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>

 //获取文本框
 var txtQQ = document.getElementById("txtQQ");
 var txtEMail = document.getElementById("txtEMail");
 var txtPhone = document.getElementById("txtPhone");
 var txtBirthday = document.getElementById("txtBirthday");
 var txtName = document.getElementById("txtName");
 ?
 //
 txtQQ.onblur = function () {
   //获取当前文本框对应的span
   var span = this.nextElementSibling;
   var reg = /^d{5,12}$/;
   //判断验证是否成功
   if(!reg.test(this.value) ){
     //验证不成功
     span.innerText = "请输入正确的QQ号";
     span.style.color = "red";
   }else{
     //验证成功
     span.innerText = "";
     span.style.color = "";
   }
 };
 ?
 //txtEMail
 txtEMail.onblur = function () {
   //获取当前文本框对应的span
   var span = this.nextElementSibling;
   var reg = /^w+@w+.w+(.w+)?$/;
   //判断验证是否成功
   if(!reg.test(this.value) ){
     //验证不成功
     span.innerText = "请输入正确的EMail地址";
     span.style.color = "red";
   }else{
     //验证成功
     span.innerText = "";
     span.style.color = "";
   }
 };

表单验证部分，封装成函数：

 var regBirthday = /^d{4}-d{1,2}-d{1,2}$/;
 addCheck(txtBirthday, regBirthday, "请输入正确的出生日期");
 //给文本框添加验证
 function addCheck(element, reg, tip) {
   element.onblur = function () {
     //获取当前文本框对应的span
     var span = this.nextElementSibling;
     //判断验证是否成功
     if(!reg.test(this.value) ){
       //验证不成功
       span.innerText = tip;
       span.style.color = "red";
     }else{
       //验证成功
       span.innerText = "";
       span.style.color = "";
     }
   };
 }

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

 <form id="frm">
   QQ号：<input type="text" name="txtQQ" data-rule="qq"><span></span><br>
   邮箱：<input type="text" name="txtEMail" data-rule="email"><span></span><br>
   手机：<input type="text" name="txtPhone" data-rule="phone"><span></span><br>
   生日：<input type="text" name="txtBirthday" data-rule="date"><span></span><br>
   姓名：<input type="text" name="txtName" data-rule="cn"><span></span><br>
 </form>

 // 所有的验证规则
 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;
 }