前端---ES5知识点小梳理四

￡神魔★判官ぃ 2024-04-07 14:38 52阅读 0赞

**目录**

正则表达式

创建

实例方法

构造函数创建

lastIndex

字符集合

边界符

边界符 配合 字符集和使用

\\b \\B

字符类

数量词

匹配QQ号

匹配身份证号

重复方式

贪婪模式

非贪婪模式 在数量词后面 ？

选择 | 类似于或者 从左向右进行匹配 匹配到之后直接输出结果

分组

捕获与引用

引用

String对正则表达式的支持 1.search 2.match 3.split 4.replace

前瞻

--------------------

##  ##

## 正则表达式 ##

### 创建 ###

var reg=/hello/修饰符
    
    var reg=new RegExp('hello','修饰符')

## 实例方法 ##

exec 可用来匹配字符串中符合正则表达式的字符串 如果匹配到，返回值是一个result数组:

test 用来测试待检测的字符串中是否有可以匹配到正则表达式的字符串

var str = 'hello html hello js hello css'
    var reg1 = /hello/g
    console.log(reg1.exec(str));

通过循环的方式 输出所有满足条件的 必须开启全局匹配模式

while(true){
      var res = reg1.exec(str)
      if (!res) {
        break;
      }
      console.log(res);
    }
    //
    [
      'hello',
      index: 0,
      input: 'hello html hello js hello css',
      groups: undefined
    ]
    [
      'hello',
      index: 11,
      input: 'hello html hello js hello css',
      groups: undefined
    ]
    [
      'hello',
      index: 20,
      input: 'hello html hello js hello css',
      groups: undefined
    ]

## 构造函数创建 ##

// var reg2 = new RegExp('正则表达式','匹配模式')
    var reg2 = new RegExp('hello','g')
    // test 满足条件 返回true 不满足 返回false
    console.log(reg2.test('helo 2022 helo'));
    //false
    console.log(typeof reg2.toString());
    console.log(typeof reg2.valueOf());
    //string
    object

#### lastIndex ####

var str = 'hello html hello js hello css'
    // 没有开启全局匹配 没有lastIndex这个属性的 每次校验都会回到其实位置 0 重新匹配
    var reg1 = /hello/
    // 开启全局匹配模式
    var reg2 = /hello/g
    
    console.log(reg1.lastIndex);
    console.log(reg1.exec(str));
    console.log(reg1.lastIndex);
    
    console.log(reg1.lastIndex);
    console.log(reg1.exec(str));
    console.log(reg1.lastIndex);
    
    
    
    console.log(reg2.lastIndex);
    console.log(reg2.exec(str));
    console.log(reg2.lastIndex);
    
    console.log(reg2.lastIndex);
    console.log(reg2.exec(str));
    console.log(reg2.lastIndex);

## 字符集合 ##

// [英文字母]
    var reg1 = /[abc]/g
    var reg2 = /[a-z]/g
    console.log(reg1.test('123'));
    //false
    
    
    // [数字]
    var reg3 = /[0-9]/g
    console.log(reg3.test('hello 2022'));
    //true
    
    
    // [^反义字符] 记住 必须写在中括号里面
    var reg4 = /[^abc]/g
    console.log(reg4.test('!'));
    //true

## 边界符 ##

// 以谁开始
    var reg1 = /^[0-9]/g
    console.log(reg1.test('1ahello'));
    //true
    
    
    // 以谁结尾
    var reg2 = /[0-9]$/
    console.log(reg2.test('hello web'));
    //false
    
    
    // 开始和结尾  精准匹配
    var reg3 = /^abc$/g
    console.log(reg3.test('abc'));
    //true

## 边界符 配合 字符集和使用 ##

var reg4 = /^[abc]$/g
    console.log(reg4.test('a'));
    //true

## \\b \\B ##

var str = 'Hello World Hello JavaScript';
    var regb = /\bHello\b/
    var regB = /\BScrip\B/
    console.log(regb.test(str));
    console.log(regB.test(str));
    //true
    //true

## 字符类 ##

// . => [^\n\r]
    var str = '\n'
    var reg1 = /./
    console.log(reg1.test(str));
    //false
    
    
    // \d => [0-9]
    // \D => [^0-9]
    var reg1 = /^\D/
    var reg2 = /^[0-9]/
    console.log(reg1.test('hello'));
    console.log(reg2.test('hello'));
    //true
    //false
    
    
    // \w => [a-zA-z0-9_]
    // W\ => [^a-zA-z0-9_]
    var reg2 = /^\w/
    var reg3 = /^\W/
    console.log(reg2.test('!123String'));
    console.log(reg3.test('!123String'));
    //false
    //true

## 数量词 ##

// * 大于等于0次
    var reg1 = /^a*$/
    console.log(reg1.test('aaaaa'));
    //true
    
    
    // + >=1次
    var reg1 = /^a+$/
    console.log(reg1.test('aaa'));

## 匹配QQ号 ##

// 1.以1-9开始
    // 2.5-11位
    // 3.只能有数字组成
    // 注意 正则表达式中 如果没有特殊需求 不要加空格
    var regQQ = /^[1-9]\d{4,10}$/
    console.log(regQQ.test('12312'));
    //true

## 匹配身份证号 ##

// 不以0开头
    // 18位
    // xX\d
    var regId = /^[1-9]\d{16}[xX\d]$/
    console.log(regId.test('23050620001112000x');
    //true

## 重复方式 ##

### 贪婪模式 ###

var str = '123456789'
    var reg1 = /\d{3,6}/g
    console.log(reg1.exec(str));
    console.log(reg1.exec(str));
    //[ '123456', index: 0, input: '123456789', groups: undefined ]
    //[ '789', index: 6, input: '123456789', groups: undefined ]

### 非贪婪模式 在数量词后面 ？ ###

var str = '123456789'
    var reg2 = /\d{3,6}?/g
    console.log(reg2.exec(str));
    console.log(reg2.exec(str));
    console.log(reg2.exec(str));
    console.log(reg2.exec(str));

## 选择 | 类似于或者 从左向右进行匹配 匹配到之后直接输出结果 ##

var reg1 = /html|css|js/g
    console.log(reg1.exec('Hello html hello css hello js'));
    console.log(reg1.exec('Hello html hello css hello js'));
    console.log(reg1.exec('Hello html hello css hello js'));

## 分组 ##

// var reg2 = /studystudystudy/
    var reg2 = /(study){3}/
    console.log(reg2.test('studystudystudy'));
    //true

## 捕获与引用 ##

>     //捕获  以左括号计算
>     var regDate = /(\d{4})-(\d{2})-(\d{2})/
>     console.log(regDate.test('2022-08-15'));
>     console.log(RegExp.$1);
>     console.log(RegExp.$2);
>     console.log(RegExp.$3);
>

var reg = /((apple) is (a (fruit)))/
    var str = "apple is a fruit"
    reg.test(str) 
    console.log(RegExp.$1); 
    console.log(RegExp.$2);
    console.log(RegExp.$3);
    console.log(RegExp.$4);

## 引用 ##

var reg4 = /(\w{3}) is \1/g
    console.log(reg4.test('kid is dik'));
    //false

## String对正则表达式的支持   1.search   2.match   3.split   4.replace ##

var str = 'good good study day day up'
    var reg1 = /hello/g
    console.log(reg1.test(str));
    console.log(str.search(reg1));

/match
    var str = 'hello world hello';
    var reg1 = /hello/;
    var reg2 = /hello/g;
    var reg3 = /(he)llo/;
    var reg4 = /(he)llo/g;
    
    
    console.log(str.match(reg1));
    // [ 'hello', index: 0, input: 'hello world hello', groups: undefined ]
    
    console.log(str.match(reg2));
    // [ 'hello', 'hello' ]
    
    console.log(str.match(reg3));
    //[
      'hello',
      'he',
      index: 0,
      input: 'hello world hello',
      groups: undefined
    ]
    
    console.log(str.match(reg4));
    //[ 'hello', 'hello' ]

// replace 查找满足正则表达式的结果 并且进行替换
    var str = 'hello html hello css hello js'
    var reg2 = /hello/g
    // 替换后的结果
    var res = str.replace(reg2,'study')
    console.log(res);

// split
    // 以某种形式分割字符串 split()
    var str = "hello123html456hello78css9hello0js";
    // + 当数字出现一次或多次时
    var reg = /\d+/;
    var result = str.split(reg);
    console.log(result);

## 前瞻 ##

// 正向前瞻
    var str = 'Hello, Hi, I am Hilary.';
    // 后面一定要匹配什么
    var reg = /H(?=i)/g;
    var newStr = str.replace(reg, "T");
    console.log(newStr);
    //Hello, Ti, I am Tilary.

// 负向前瞻
    var str = 'Hello, Hi, I am Hilary.';
    // 后面一定不要匹配什么
    var reg = /H(?!i)/g;
    var newStr = str.replace(reg, "T");
    console.log(newStr);
    //Tello, Hi, I am Hilary.