正则表达式小结

一晌贪欢i

已于 2023-02-13 11:04:59 修改

阅读量279

点赞数 1

文章标签：正则表达式

于 2019-06-03 19:18:51 首次发布

本文链接：https://blog.csdn.net/qq_27674439/article/details/90757369

版权

正则表达式

了解正则表达式基本语法
能够使用JavaScript的正则对象

正则表达式简介

什么是正则表达式

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

正则表达式的作用

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

正则表达式的特点

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

正则表达式的测试

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

正则表达式的组成

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

示例演示：

\d 匹配数字
ab\d 匹配 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}$

验证邮箱 xxx@itcast.cn：

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

验证IP地址 192.168.1.10

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

JavaScript 中使用正则表达式

创建正则对象

方式1：

var reg = new Regex('\d', 'i');
var reg = new Regex('\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));

匹配正则表达式

//        console.log(/./.test("除了回车换行以为的任意字符"));//true
//        console.log(/.*/.test("0个到多个"));//true
//        console.log(/.+/.test("1个到多个"));//true
//        console.log(/.?/.test("哈哈"));//true
//        console.log(/[0-9]/.test("9527"));//true
//        console.log(/[a-z]/.test("what"));//true
//        console.log(/[A-Z]/.test("Are"));//true
//        console.log(/[a-zA-Z]/.test("干啥子"));//false
//        console.log(/[0-9a-zA-Z]/.test("9ebg"));//true
//        console.log(/b|(ara)/.test("abra"));//true
//        console.log(/[a-z]{2,3}/.test("arfsf"));//true


        console.log(/\d/.test("998"));//true
        console.log(/\d*/.test("998"));//true
        console.log(/\d+/.test("998"));//true
        console.log(/\d{0,}/.test("998"));//true
        console.log(/\d{2,3}/.test("998"));//true
        console.log(/\D/.test("eat"));//true
        console.log(/\s/.test("  "));//true
        console.log(/\S/.test("嘎嘎"));//true
        console.log(/\w/.test("_"));//true
        console.log(/\W/.test("_"));//true

正则表达式案例

1.验证密码强弱
2.验证邮箱：[0-9a-zA-Z_.-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){1,2}
3.验证中文名字[\u4e00-\u9fa5]

正则提取

// 1. 提取工资
var str = "张三：1000，李四：5000，王五：8000。";
var array = str.match(/\d+/g);
console.log(array);

// 2. 提取email地址
var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
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 = "123123@xx.com";
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;
}

正则表达式中?=和?:和?!的理解

要理解?=和?!，首先需要理解前瞻，后顾，负前瞻，负后顾四个概念： ```js // 前瞻： exp1(?=exp2) 查找exp2前面的exp1 // 后顾： (?<=exp2)exp1 查找exp2后面的exp1 // 负前瞻： exp1(?!exp2) 查找后面不是exp2的exp1 // 负后顾： (?<!exp2)exp1 查找前面不是exp2的exp1 ``` 举例： ```js "中国人".replace(/(?<=中国)人/, "rr") // 匹配中国人中的人，将其替换为rr，结果为中国rr "法国人".replace(/(?<=中国)人/, "rr") // 结果为法国人，因为人前面不是中国，所以无法匹配到 ``` 要理解?:则需要理解捕获分组和非捕获分组的概念： ``` ()表示捕获分组，()会把每个分组里的匹配的值保存起来，使用$n(n是一个数字，表示第n个捕获组的内容) (?:)表示非捕获分组，和捕获分组唯一的区别在于，非捕获分组匹配的值不会保存起来 ```

举例：

// 数字格式化 1,123,000
"1234567890".replace(/\B(?=(?:\d{3})+(?!\d))/g,",") 
// 结果：1,234,567,890，匹配的是后面是3*n个数字的非单词边界(\B)

正则表达式的() [] {} 有着不同的意思。

（） 是为了提取匹配字符串的，表达式中有几个()就有几个相应的匹配字符串
(\s)表示连续空格的字符串
[] 是定义匹配的字符范围。比如[a-zA-Z0-9]表示相应位置的字符要匹配英文字符和数字。[\s表示空格或者号]
{}一般是用来匹配的长度。比如\s{3}表示匹配三个空格，\s[1,3]表示匹配1到3个空格
(0-9)匹配'0-9'本身。[0-9]匹配数字（注意后面有*，可以为空）[0-9]+匹配数字(注意后面有+，不可以为空)，
{0-9}写法是错误的
[0-9]{0,9}表示长度为0到9的数字字符串。

圆括号()是组，主要应用在限制多选结构的范围/分组/捕获文本/环视/特殊模式处理
示例:

1(abc|bcd|cde),表示这一段是abc、bcd、cde三者之一，顺序也必须一致
2、(abc)？ 表示这一组要么一起出现，要么不出现，出现那则按顺序出现
3、(？：abc)表示找到一样abc的一组，但是不记录，不保存到变量中，否则可以通过变量中，否则可以通过x取第几个括号所匹配道德项，比如：
(aaa)(bbb)(ccc)(?:ddd)(eee)可以用1获取(𝑎𝑎𝑎)匹配到的内容，而1获取(aaa)匹配到的内容，而3则获取到了(ccc)匹配到的内容，而$4则获取的是由(eee)匹配到的内容，因为前一对括号没有保存变量
4.a(?=bbb)顺序环视 表示a后面必须紧跟3个连续的b
5、(?i:xxxx)不区分大小写   (?s:.*)跨行匹配，可以匹配回车符

方括号是单个匹配字符集/排除字符集/命名字符集
示例：

1、[0-3]，表示找到一个位置上的字符只能是0到3折四个数字，与（abc|bcd|cde）的作用比较类似，但圆括号可以匹配多个连续的字符
而一对方括号只能匹配单个字符
2、[^0-3] 表示找到这个位置上字符只能是除了0到3之外的所有字符
3、[:digit:] 0-9 [:alnum] A-Za-z0-9

()和[]有本质的区别

()内的内容表示的是一个表达式，()本身不匹配任何东西，也不惜那是匹配任何东西，只是把括号内的内容作为

同一个表达式来处理，例如(ab){1,3},就表示ab一起连续出现最少1次，最多三次。如果没有括号的话，ab{1,3},

就表示a 后面紧跟的b出现的最少一次，最多三次。另外，括号在匹配模式中也跟重要。这个就不延伸了。

[]表示匹配字符在[]中，兵出现一次，并且reshuffle字符写在[]会被当成普通字符来匹配，例如[(a)],会匹配(、a、)、这三个字符。

所以()[] 无论是作用还是表示的含义。都有天壤之别，没有什么联系。