一、正则表达式

regular expression：RegExp

用来处理字符串的规则

  • 只能处理字符串
  • 它是一个规则：可以验证字符串是否符和某个规则（text），也可以把字符串中符和规则的内容捕获到（exec / match…）
  1. let str = "good good study, day day up!";
  2.  // 学正则就是用来指定规则（是否包含数字）
  3.  let reg = /\d+/;
  4.  reg.test(str); // false
  5.  str = "2019-08-12";
  6.  reg.exec(str); // ["2019", index:0,inpputs:"原始字符串"]

二、编写正则表达式

创建正则的方式

  1. // 字面量创建方式：两个斜杠之间包起来的，都是用来描述规则的元字符
  2. let reg1 = /\d+/;
  3. // 构造函数模式创建 两个参数：元字符字符串，修饰符字符串
  4. let reg2 = new RegExp("\\d+");

正则表达式由两部分组成

  • 元字符
  1. // 常用的元字符
  2. // 1. 量词元字符：设置出现的次数
  3. * 零到多次
  4. + 一到多次
  5. ? 零次或者一次
  6. {n} 出现 n 次
  7. {n,} 出现 n 到多次
  8. {n,m} 出现 n 到多次
  9. // 2. 特殊元字符：单个或者组合在一起代表特殊的含义
  10. \ 转义字符（普通 -> 特殊 -> 普通）
  11. \n 换行符
  12. . 除 \n（换行符）以外的任意字符
  13. ^ 以哪一个元字符作为开始
  14. $ 以哪一个元字符作为结束
  15. \d 0~9之间的一个数字
  16. \D 非0~9之间的一个数字 （大写和小写的意思是相反的）
  17. \w 数字、字母、下划线中的任意一个字符
  18. \s 一个空白字符（包含空格、制表符、换页符等）
  19. \t 一个制表符（一个 TAB 键：四个空格）
  20. \b 匹配一个单词的边界
  21. x|y x 或者 y 中的一个字符
  22. [xyz] x 或者 y 或者 z 中的一个字符
  23. [^xy] 除了 x / y 以外的任意字符
  24. [a-z] 指定 a-z 这个范围中的任意字符  [0-9a-zA-Z_]===\w
  25. [^a-z] 上一个的取反“非”
  26. () 正则中的分组符号
  27. (?:) 只匹配不捕获
  28. (?=) 正向预查
  29. (?!) 负向预查 
  30. // 3. 普通元字符：代表本身含义的
  31. /zhufeng/ 此正则匹配的就是"zhufeng"
  • 修饰符
  1.  // 正则表达式常用的修饰符：img
  2.  i => ignoreCace 忽略单词大小写匹配
  3.  m => multiline 可以进行多行匹配
  4.  g => global 全局匹配
  5.  /A/.text('lalala') // false
  6.  /A/i.test('lalala') // true

三、元字符详细解析

^$

  1. let reg = /^\d/;
  2. console.log(reg.test("zhufeng")); // false
  3. console.log(reg.test("2019zhufeng")); // true
  4. console.log(reg.test("zhufeng2019")); // false
  1. let reg = /\d$/;
  2. console.log(reg.test("zhufeng")); // false
  3. console.log(reg.test("2019zhufeng")); // false
  4. console.log(reg.test("zhufeng2019")); // true
  1. // ^/$ 两个都不加：字符串中包含符合规则的内容即可
  2. let reg1 = /\d+/;
  3. // ^/$ 两个都加：字符串只能是和规则一致的内容
  4. let reg2 = /^\d+$/;
  5. // 举个例子：验证手机号码（11位，第一个数字是1即可）
  6. let reg = /^1\d{10}$/;

\

  1. // .不是小数点，是除 \n 外的任意字符
  2. let reg = /^2.3$/;
  3. console.log(reg.test("2.3")); // true
  4. console.log(reg.test("2@3")); // true
  5. console.log(reg.test("23")); // false
  6. // 基于转义字符，让其只能代表小数点
  7. reg = /^2\.3$/;
  8. console.log(reg.test("2.3")); // true
  9. console.log(reg.test("2@3")); // false
  10. let str = "\\d";
  11. reg = /^\d$/; // \d 代表0-9的数字
  12. console.log(reg.test(str)); // false
  13. reg = /^\\d$/; // 把特殊符合转换为普通的
  14. console.log(reg.test(str)); // true

x|y

  1. let reg = /^18|29$/;
  2. console.log(reg.test("18")); // true
  3. console.log(reg.test("29")); // true
  4. console.log(reg.test("129")); // true
  5. console.log(reg.test("189")); // true
  6. console.log(reg.test("1829")); // true
  7. console.log(reg.test("829")); // true
  8. console.log(reg.test("182")); // true
  9. // ---直接 x | y 会存在很乱的优先级问题，一般我们写的时候都伴随着小括号进行分组，因为小括号改变处理的优先级 => 小括号：分组
  10. reg = /^(18|29)$/;
  11. console.log(reg.test("18")); // true
  12. console.log(reg.test("29")); // true
  13. console.log(reg.test("129")); // false
  14. console.log(reg.test("189")); // false
  15. // 只能是18或者29中的一个了

[]

  1. // 1.中括号中出现的字符一般都代表本身的含义
  2. let reg = /^[@+]$/;
  3. console.log(reg.test("@")); // true
  4. console.log(reg.test("+")); // true
  5. console.log(reg.test("@@")); // false
  6. console.log(reg.test("@+")); // false
  7. reg = /^[\d]$/; //=>\d在中括号中还是0-9
  8. console.log(reg.test("d"));// false
  9. console.log(reg.test("\\"));// false
  10. console.log(reg.test("9"));// true
  11. // 2.中括号中不存在多位数
  12. reg = /^[18]$/;
  13. console.log(reg.test("1")); // true
  14. console.log(reg.test("8")); // true
  15. console.log(reg.test("18")); // false
  16. reg = /^[10-29]$/; // 1或者0-2或者9
  17. console.log(reg.test("1")); // true
  18. console.log(reg.test("9")); // true
  19. console.log(reg.test("0")); // true
  20. console.log(reg.test("2")); // true
  21. console.log(reg.test("10")); //false

四、常用的正则表达式

  1. 验证是否为有效数字
  1. /*
  2.  * 规则分析
  3.  * 1.可能出现 + - 号，也可能不出现  [+-]?
  4.  * 2.一位0-9都可以，多位首位不能是0 (\d|([1-9]\d+))
  5.  * 3.小数部分可能有可能没有，一旦有后面必须有小数点+数字 (\.\d+)?
  6.  */
  7. let reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;
  1. 验证密码
  1. // 数字、字母、下划线
  2. // 6~16位
  3. let val = userPassInp.value,
  4.     reg = /^\w{6,16}$/;
  5. let flag=reg.test(val);
  6. function checkPass(val){
  7.     if(val.length<6 || val.length>16){
  8.      alert('长度必须介于6-16位之间！');
  9.      return;
  10.  }
  11.     let area=['a','b'....'_']; //=>包含数字、字母、下划线
  12.     for(let i=0;i<val.length;i++){
  13.         let char=val[i];
  14.         if(!area.includes(char)){
  15.             alert('格式不正确！');
  16.          return;
  17.         }
  18.     }
  19. }
  1. 验证真实性名的
  1. /*
  2.  * 1.汉字  /^[\u4E00-\u9FA5]$/
  3.  * 2.名字长度 2~10位
  4.  * 3.可能有译名 ·汉字  (·[\u4E00-\u9FA5]{2,10}){0,2}
  5.  */
  6. let reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
  1. 验证邮箱的
  1. let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
  3. // \w+((-\w+)|(\.\w+))*
  4. // 1.开头是数字字母下划线（1到多位）
  5. // 2.还可以是 -数字字母下划线 或者 .数字字母下划线,整体零到多次
  6. // 邮箱的名字由“数字、字母、下划线、-、.”几部分组成，但是-/.不能连续出现也不能作为开始
  8. //=> @[A-Za-z0-9]+
  9. //1.@后面紧跟着：数字、字母 （1-多位）
  11. // ((\.|-)[A-Za-z0-9]+)*
  12. // 1.对@后面名字的补充
  13. // 多域名     .com.cn
  14. // 企业邮箱    zxt@zhufeng-peixun-office.com
  16. // \.[A-Za-z0-9]+
  17. // 1. 这个匹配的是最后的域名（.com/.cn/.org/.edu/.net...）
  1. 身份证号码
  1. /*
  2.  * 1. 一共18位
  3.  * 2. 最后一位可能是X
  4.  *
  5.  * 身份证前六位：省市县  130828
  6.  * 中间八位：年月日
  7.  * 最后四位：
  8.  *   最后一位 => X或者数字
  9.  *   倒数第二位 => 偶数 女  奇数 男
  10.  *   其余的是经过算法算出来的
  11.  */
  12. // let reg = /^\d{17}(\d|X)$/;
  13. // 小括号分组的第二个作用：分组捕获，不仅可以把大正则匹配的信息捕获到，还可以单独捕获到每个小分组的内容
  14. let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|X)$/;
  15. reg.exec("130828199012040617"); // ["130828199012040617", "130828", "1990", "12", "04", 
  16. // "1", "7"...] 捕获结果是数组，包含每一个小分组单独获取的内容