第十六章 正则的介绍和使用

一、正则的概念和意义

1. 正则：正确的规则，用来约束字符串的规则，正则的数据类型是对象，正则对象，正则表达式
2. 正则的意义：
   • 节省代码量，减少代码冗余
   • 并没有节省性能
   • 如：从一串杂乱的字符串中取出所有的数字，放在数组中

var str = “asd256asd834as5da38sd512zcacas";
var linshi='';
var arr=[];
for(var i = 0; i < str.length; i++){
  if(str[i]>=0 && str[i]<=9){
    linshi += str[i];
  }else{
    if(linshi != ''){
      arr.push(linshi)
      linshi = '';
    }
  }
}
console.log(arr);

二、正则的创建

1. 字面量：var reg1 = /a/;
2. 构造函数：var reg2 = new RegExp("a");
3. 区别：
   • 构造函数可以根据变量创建正则
   • 修饰符放在构造函数的第二个参数
   • 构造函数内，基本元字符书写成\\d，字面量为\d

三、正则的写

• 写正则：正则的语法，正则中的每个符号的含义

1. 修饰符
   • g：全局
   • i：忽略大小写
2. 量词：
   • +：前一个部分，出现1次或以上
   • ?：前一个部分，出现0次或1次
   • *：前一个部分，出现0次或以上
   • {n}：前一个部分，出现n次
   • {n,}：前一个部分，出现n次或以上
   • {n,m}：前一个部分，出现n次到m次
3. 特殊
   • 子串：()，包裹起来的部分是一个子串，表示一个整体
   • 或：|，或
   • 中元符：[]，包裹起来的部分默认是或的关系
     • 一个中元符用于匹配一位字符
   • 非：[^]，如：非数字：[^0-9]
   • 范围符：-，配合中元符使用，如：[a-z]，表示从a到z
4. 转义符（元字符）：
   • \d：表示所有数字，同：[0-9]
   • \D：除了所有数字，同：[^0-9]
   • \w：表示所有数字字母下划线，同：[0-9a-zA-Z_]
   • \W：除了所有数字字母下划线，同：[^0-9a-zA-Z_]
   • \s：表示空白符，一般用于匹配空格
   • \S：表示非空白符
   • .：通配符，表示所有字符，慎用
   • \：转义符，将，在正则中有含义的符号，转成普通字符匹配
5. test验证时
   • ^：标记从字符串开头的位置验证
   • $：标记验证到字符串结尾的位置

四、正则的使用

1. 查找：从字符串中查找子串，是否存在，截取
   • str.search(reg)
   • str.match(reg)
   • reg.exec(str)
   • 区别：
2. 替换：找到老字符，替换成新字符
   • str.replace(reg, newStr)
   • 贪婪特性：尽可能的多匹配
3. 验证：判断字符串是否符合规则要求
   • reg.test(str)
   • 默认只验证字符串的局部，可以通过^和$标记开始和结尾的位置

五、读正则

• 邮箱：/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
• URL：/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
• HTML标签：/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/
• 中文：/^[\u2E80-\u9FFF]+$/
• 正则手册：

正则表达式手册

六、练习

1. 编写正则，通过文件名验证是否是图片文件
   • xxx.jpg
   • xxx.png
   • xxx.gif
   • xxx.jpeg
   • xxx.webp
   • xxx.doc
   • xxx.exe
   • xxx.ppt
2. 身份证号
   • 上网查规则
3. 敏感词过滤
   • 多个敏感放在一个数组中
   • 使用正则完成
   • 利用构造函数创建正则
   • 基础：连续的相同的敏感词替换成一个*
   • 高级：连续的不同的敏感词替换成一个*
4. 表单验证
   • 用户名验证：数字字母下划线中划线中文，5~10位
   • 密码验证：数字字母，6~10位
   • 重复密码验证：与正则无关
   • 手机号验证
   • 邮箱验证
   • 要求：每个输入框，边输入边验证输入框内容，在当前输入框后显示提示语
   • 要求：点击按钮，所有输入框全部正确，提示成功，否则，提示失败
     • 升级版：提示 失败的项
5. 密码强度
   • 使用正则验证密码强度
   • 有三个块，默认为灰色
   • 弱：亮一个
   • 中：亮两个
   • 强：亮三个