JS高级第4天

一、正则表达式概述

1、概念

正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式，在数据类型中是属于对象

2、作用

正则表达式通常用来校验、查找、替换指定规则的字符文本

• 验证表单，如：只能输入英文、字母、数字和下划线

• 过滤页面内容中的敏感词汇，或者对指定字符组合进行替换

• 从字符串中提取我们想要的特定部分

3、特点

• 灵活性、逻辑性和功能性 （强大）
• 简单高效
• 可读性稍差，不便于记忆（一般复制相关的正则表达式，修改后即可使用）

二、正则表达式在js中的使用

1、正则表达式的创建

1.造函数方式 RegExp，创建正则表达式

var reg = new RegExp(/123/);
        console.log(reg);

2.字面量方式创建正则表达式 /表达式/

var reg2 = /123/;

2、正则表达式的 test 方法

检测字符串是否符合正则表达式定义的规则，返回 true 或 false

• 语法： reg.test(str)

var reg2 = /123/;
console.log(reg2.test('刺客123'));//true

三、正则表达式中的特殊字符

1、正则表达式的组成

一个正则表达式可以由简单的字符构成，比如 /123/, 也可以是简单和特殊字符的组合，比如：/^abc/

其中，特殊字符又叫元字符，是在表达式中有特殊意义的字符，如 ^, $, . 等

特殊字符非常多，可以参考：

MDN

2、边界符（位置符）

主要用来匹配字符的开始和结束位置:

(1) ^: 用来匹配以…开头

(2) $: 用来匹配以…结尾

注意：

• 不使用 ^ 和 $ 表示只要字符串中包含匹配的内容就返回 true, 可以多出其他任意字符
• ^ 和 $ 在一起配合使用，表示是精确匹配, 不能多出其他字符也不能少 (必须满足数量和类型都一致)

var reg1 = /^567/; //字符串中必须以567开头
     console.log(reg1.test('刺客567')); //false
     console.log(reg1.test('561237')); //false
     console.log(reg1.test('567刺客')); //true
     console.log('-------------------------------');
     var reg2 = /ad$/; //字符串中必须以ad结尾
     console.log(reg2.test('ADad')); //true
     console.log(reg2.test('adfgad')); //true
     console.log(reg2.test('afgd')); //false
     console.log('-------------------------------');
     var reg3 = /^adc$/; //字符串中数量和类型必须符合adc
     console.log(reg3.test('adc')); //true
     console.log(reg3.test('adcadc')); //false

3、字符类

3.1、字符集合 如：[xyz]

表示匹配字符集合中的任意字符，中括号中只要有任意一个字符出现在字符串就满足规则

var reg1 = /[xyz]123/; //规则：只要包含x,y,z中任意一个再跟着123就满足条件
        console.log(reg1.test('xy123')); //true
        console.log(reg1.test('ad123')); //false

 var reg2 = /^[adc]456$/; //精确匹配，字符的数量和类型都必须满足（数量：4，类型：a456,b456,c456）
        console.log(reg2.test('a456')); //true
        console.log(reg2.test('b456')); //false
        console.log(reg2.test('adc456')); //false

3.2中括号中的特殊字符自动转义

用破折号（-）来指定一个字符范围，如：[c-f1-3A-D]

注意:

• 对于点（.）和星号（*）这样的特殊符号中括号中自动转义为原本的意义

var reg3 = /^[c-f1-3A-D]$/; //精确匹配，只能是cdf123ABCD中的一个
        console.log(reg3.test('asd')); //false
        console.log(reg3.test('cdf')); //false
        console.log(reg3.test('cdf123ABCD')); //false
        console.log(reg3.test('c')); //true

3.3反向字符集合

表示匹配没有包含在字符集合中的字符，字符串中只要有一个不在中括号内的字符就满足规则

var reg2 = /^[^a-f]$/; //精准匹配（数量1，类型，不在小写a到f之间的其他字符）
       console.log(reg2.test('a')); //false
       console.log(reg2.test('z')); //true

4、量词符

用来制定某个字符出现次数的特殊符号

4.1 *

表示前面的字符出现 0 次或多次, 即可有可无(数量>=0)

var reg1 = /^ab*c$/; //规则：字符串必须以a开头，b字符可有可无，后面一定跟着c
        console.log(reg1.test('abbcd')); //false
        console.log(reg1.test('abbc')); //true
        console.log(reg1.test('ac')); //true
        console.log(reg1.test('aac')); //false

4.2 +

表示前面的字符至少出现 1 次或多次, 即至少出现一次

var reg2 = /^ab+c$/; //规则：字符串必须以a开头，b字符至少出现一次，后面一定跟着c
        console.log(reg2.test('abbcd')); //false
        console.log(reg2.test('abbc')); //true
        console.log(reg2.test('ac')); //false
        console.log(reg2.test('aac')); //false

4.3 ?

表示前面的字符出现 0 次或 1 次, 要么不出现, 要么只出现 1 次

var reg3 = /^[0-9a-z]?$/; //规则：字符串必须以0-9或a-z开头，只能出现一次
        console.log(reg3.test('abbcd')); //false
        console.log(reg3.test('abbc')); //false
        console.log(reg3.test('ac')); //false
        console.log(reg3.test('aac')); //false
        console.log(reg3.test('0')); //true
        console.log(reg3.test('a')); //true

4.4 {3}

表示前面的字符只能出现 3 次

var reg4 = /^[0-9a-z]{3}$/; //规则：字符串必须以0-9或a-z开头，只能出现3次
        console.log(reg4.test('abbcd')); //false
        console.log(reg4.test('abbc')); //false
        console.log(reg4.test('ac')); //false
        console.log(reg4.test('aac')); //true
        console.log(reg4.test('0')); //false
        console.log(reg4.test('a')); //false

4.5 {3,}

表示前面的字符出现 3 次 或 3次以上

var reg5 = /^[0-9a-z]{3,}$/; //规则：字符串必须以0-9或a-z开头，只能出现3次或三次以上
        console.log(reg5.test('abbcd')); //true
        console.log(reg5.test('abbc')); //true
        console.log(reg5.test('ac')); //false
        console.log(reg5.test('aac')); //true
        console.log(reg5.test('0')); //false
        console.log(reg5.test('a')); //false

4.6 {3,5}

表示前面的字符出现 3 次 到 5 次以内

var reg6 = /^[0-9a-z]{3,5}$/; //规则：字符串必须以0-9或a-z开头，只能出现3到5次
       // 注意{3,5}之间不能有空格
       console.log(reg6.test('abbcd')); //true
       console.log(reg6.test('abbcd123')); //false
       console.log(reg6.test('abbc')); //true
       console.log(reg6.test('ac')); //false
       console.log(reg6.test('aac')); //true
       console.log(reg6.test('0')); //false
       console.log(reg6.test('a')); //false

5、 括号总结

• 中括号 [xyz] 字符集合：匹配方括号中的任意字符
• 大括号 {3,8} 量词符：表示重复的次数
• 小括号 (xyz): 表示一个整体

var reg = /^*(xyz){2}$/;
       console.log(reg.test('xyzxyz'));//true
       console.log(reg.test('xyzxyzxyz'));//false

6、正则表达式中的预定义类

• \d：匹配 0~9 之间的任意一个数字，等价于 [0-9]
• \D: 匹配所有 0~9 之外的字符，等价于 [^0-9]
• \w: 匹配任意的字母、数字和下划线，等价于 [a-zA-Z0-9_]
• \W: 匹配任意的字母、数字和下划线之外的字符，等价于 [^0-9a-zA-Z_]
• \s: 匹配所有的空格（包括换行符，制表符，空格符等），等价于 [\t\r\n\v\f]
• \S：匹配所有的非空格符，等价于 [^\t\r\n\v\f]
• .也是正则中的一个特殊字符：（小数点）默认匹配除换行符之外的任何单个字符

记忆：所有大写字符表示 “非”, 上述预定义类只表示单个字符

四、正则替换replace

1、replace

replace(reg, 替换后的字符) 可以替换字符串中的字符，参数可以是普通字符串，也可以是正则表达式

2、正则表达式参数 /表达式/参数

指定匹配的模式：

（1）/表达式/g 全局匹配

（2）/表达式/i 忽略大小写进行匹配

<input type="text" placeholder="请输入留言">
var ipt = document.querySelector('input');
ipt.addEventListener('keyup', function() {
            this.value = this.value.replace(/傻叉|傻\s*叉|sx/gi, '**')
        })

3、match 方法

可以配合正则表达式, 从字符串中找出所有匹配正则的字符

var reg = /\d{3}/g;
        var res = str.match(reg);
        console.log(res);