正则表达式

一 正则表达式概述

1.1 什么是正则表达式

• 正则表达式本身就是一种语言，这在其他语言中是通用的
• 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符串、及这些特定字符串的组合，组成的一个“规则字符串”，这个规则字符串用来表达对字符串的一种过滤逻辑。
• 正则就是规则，让计算机读懂我们的规则

1.2 正则表达式能做什么

• 假设用户需要在 HTML 表单中填写姓名、地址、出生日期等
• 那么在将表单提交到服务器进一步处理前, JavaScript 程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的

1.3 JS中的正则表达式

• 正则表达式 (regular expression)是一个描述字符模式的对象。
• ECMAScript 的 RegExp 类表示正则表达式
• 正则表达式主要用来验证客户端的输入数据
• 用户填写完表单单击按钮之后 ,表单就会被发送到服务器,在服务器端通常会用 PHP、ASP.NET等服务器脚本对其进行进一步处理
• 因为客户端验证,可以节约大量的服务器端的系统资源,并且提供更好的用户体验

二、正则表达式的使用

2.1 创建正则表达式

• 创建正则表达式和创建字符串类似 ,创建正则表达式提供了两种方法

  • 一种是采用 new 运算符,

    var reg = new RegExp('box', 'ig'); //第二个参数可选模式修饰符

  • 另一个是采用字面量方式

    var reg = /box/ig; //在第二个斜杠后面加上模式修饰符 g：代表可以进行全局匹配。正则默认匹配到就不匹配了 i：代表不区分大小写匹配。

// 正则表达式定义方法1
var reg1 = new RegExp("abc");
console.log(reg1);// /abc/
console.log(typeof reg1);//object
console.log(typeof new Date());//object
console.log(typeof new String("12345"));//object

var str = "12beadbabcre";
console.log(str.search(reg1));//7

// 正则定义方法2
//  \d 匹配所有的数字
var reg2 = /\d/;
var str2 = "ab3er4b6b4";
console.log(str2.search(reg2));
Copy to clipboardErrorCopied

2.2 正则表达式的测试方法

2.2.1 正则对象方法

RegExp 对象包含两个方法:test()和 exec(),功能基本相似,用于测试字符串匹配。

• test() 方法在字符串中查找是否存在指定的正则表达式并返回布尔值 ,如果存在则返回 true,不存在则返回 false。

  //判断一个字符串是不是全数字
  //判断一个字符串有没有数字
  
  // \d代表匹配数字  \D
  var oIpt = document.getElementById("ipt");
  var reg1 = /\d/;
  var reg2 = /\D/;
  oIpt.onchange = function () {
      var userCon = this.value;
      // 如果输入的含有数字则弹出 包含数字
      /*if (reg1.test(userCon)){
              alert("包含数字")
          } else {
              alert("没有数字")
          }*/
  
      // 判断是不是都是数字  \D一个都匹配不到，则全部是数字
      if (reg2.test(userCon)){
          alert("不全是数字");
      } else{
          alert("全是数字")
      }
  }Copy to clipboardErrorCopied

• exec()方法也用于在字符串中查找指定正则表达式,如果 exec()方法执行成功,则返回包含该查找字符串的相关信息数组。如果执行失败,则返回 null

  var reg = /\d/g;//g是全局匹配
  var str = "aabb223";
  /*exec方法  对字符串进行查找，每次调用只会查找一次，查找到1个以后，便停止查找
      然后把小标移到查找元素的后一位。
      返回查找到信息的相关数组
  */
  console.log(reg.exec(str));
  console.log(reg.exec(str));
  console.log(reg.exec(str));
  console.log(reg.exec(str));
  
  // 需求：当表单失去焦点以后，把用户输入的信息过滤，把所有的数字那出来组成一个新的数字字符串、
  var oText = document.getElementById("text");
  oText.onchange = function () {
      var reg1 = /\d/g;
      var userCon = oText.value;
      var newStr = '';
      /*while(reg.exec(userCon)){
              newStr += reg.exec(userCon)[0];
          }*/
      do{
          var a = reg1.exec(userCon);
          if (a){
              newStr += a[0]
          } else{
              break;
          }
      }while(a);
      console.log(newStr);
  }Copy to clipboardErrorCopied

2.2.2 字符串对象方法

• search(pattern)返回字符串中 pattern 开始(第一次出现)位置

  var reg = /g/g;
  var str = "bjkgdlahxjqgasj;lj112!@#$#%#!#";
  console.log(str.search(reg));
  
  // search和indexOf  都是返回匹配元素的出现的位置
  //     1、search方法可以传递正则  indexOf只能传递要匹配的字符串
  //     2、indexOf是更为底层的方法，如果说执行相同的查找，indexOf的效率更高，如果不使用正则匹配 ，那么建议使用indexOfCopy to clipboardErrorCopied

• match(pattern)返回 pattern 中的子串或 null

  var reg = /\d/g;
  // var reg = /zzz/g;
  var str = "3h45h3gg4gf3";
  // match 返回匹配项目的集合（正则开启全局）  是一个数组
  // 如果匹配不到则返回null
  console.log(str.match(reg));Copy to clipboardErrorCopied

• replace(pattern, replacement)用 replacement 替换 pattern

  /*var str = "  wad sdf e3 3 d s";
    var newStr = str.replace(" ","");//匹配到所有的空格 然后用空字符串替换
    console.log(str);
    console.log(newStr);
  */
  
  var str = "  wad sdf e3 3 d s";
  // \s代表空格
  var reg = /\s/g;
  var newStr = str.replace(reg,"");//匹配到所有的空格 然后用空字符串替换
  console.log(str);
  console.log(newStr);
  
  //和谐敏感词
  var oText = document.getElementById("text");
  oText.onchange = function () {
      var reg = /滚蛋|傻逼|傻屌一个|狗日的/g;
      var userCon = oText.value;
      // var newStr = userCon.replace(reg,"**");
  
      var newStr = userCon.replace(reg,function (i) {
          var len = i.length;
          var str = "";
          for (var j = 0; j < len; j++) {
              str += "*";
          }
          return str;
      });
      oText.value = newStr;
  }Copy to clipboardErrorCopied

• split(pattern)返回字符串按指定 pattern 拆分的数组

  var  str = "asd3fgh4jkl5hg6hu7a";
  // var str = "1qazxcvbnm,./']="
  
  var arr = str.split("g");
  console.log(arr);
  
  var reg = /\d/g;
  var arr = str.split(reg);
  console.log(arr);Copy to clipboardErrorCopied

三 正则表达式的使用

3.1 中括号

中括号代表一个整体，并且括号中的字符属于或者关系，只挑选一个出来匹配

• [abc] : 查找方括号之间的任何字符。
• [ ^ abc] : 查找任何不在方括号之间的字符。
• [0-9] : 查找任何从 0 至 9 的数字。
• [a-z] : 查找任何从小写 a 到小写 z 的字符。
• [A-Z] : 查找任何从大写 A 到大写 Z的字符。

var reg = /[abc]/g;
var str = "ancbgfbdc";
console.log(str.match(reg));

var reg2 = /[狗猫羊]/g;
// var reg2 = /狗|猫|羊/g
var str = "我家买了两个狗供我上学，然后我家猫不开心，和羊在一起了";
console.log(str.match(reg2));

var reg3 = /[0-9]+/g;
// var reg3 = /\d/g;
var str = "ajsbf382012bnmqsd192039e";
console.log(str.match(reg3));

var reg4 = /[0-9狗猫羊a-z]+/g;
var str4 = "89猫毛狗毛haha";
console.log(str4.match(reg4));

var reg5 = /[a-zA-Z0-9_\\]{10,15}/;
var str = "lph1\\256_789";
console.log(reg5.test(str));

var reg6 = /[^A-Z]+/g;
var str = "HHGG";
console.log(reg6.test(str));//falseCopy to clipboardErrorCopied

3.2 转义字符

• 正则表达式元字符是包含特殊含义的字符
• . : 匹配任意一个字符，除了换行符( \n )
• \b : 匹配一个单词边界，不匹配任何字符,只是匹配一个位置（一边数数字字母下划线，另一边必须是开头位置结束位置以及非数字字母下划线）
• \d : 匹配任意一个数字，0~9 中的任意一个
• \D : 匹配任意一个非数字
• \s : 匹配任意一个空白字符
• \S：匹配非空格
• \w : 匹配任意一个字符( 字母、 数字、下划线 )
• \W：匹配非字母、 数字、下划线 )[^a-zA-Z0-9_]
• \n : 查找换行符

// 将类名box1替换成box4
var arr = ["box1","box1 box2","box1 box3","box1box2"]
// var arr = ["box4","box4 box2","box4 box3","box1box2"]

var newArr = arr.map(function (item,index) {
    // \b单词边界
    var reg1 = /\bbox1\b/g;
    return item.replace(reg1,"box4");
})
console.log(newArr);Copy to clipboardErrorCopied

3.3 获取控制 量词

• n+ : 匹配任何包含至少一个 n 的字符串。
• n? : 匹配任何包含零个或一个 n 的字符串。
• n* : 匹配任何包含零个或多个 n 的字符串。
• n{X} : 匹配包含 X 个 n 的序列的字符串。
• n{X,Y} : 匹配包含 X 到Y 个 n 的序列的字符串。（y可以不写）
• ^n : 匹配任何开头为 n 的字符串。
• n$ : 匹配任何结尾为 n 的字符串。
• | : 匹配左边或者右边
• \ : 转义符
• /[\u4E00-\u9FA5]/包含中文字符正则

四 案例

• 通用的邮箱标准： 长度不限，可以使用英文（包括大小写）、数字、点号、下划线、减号，首字母必须是字母或数字；

  "^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$“

• 手机号验证

  /^1[0-9]{10}$/

• 用户名验证：

  /^[a-zA-Z] [a-zA-Z0-9]{3,15}$/

• 密码验证：

  /^[a-zA-Z0-9]{4,10}$/

• 邮箱验证：

  /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/

• 手机号验证：

  /^1\d{10}$/

• 十六进制颜色正则：

  /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/

• 车牌号正则：

  /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/