js|正则方法的对比和用法🌴🌴

常用

    // 匹配2002-12-01
      var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/
      // {n,m} 至少匹配n次，最多匹配m次
      // \2的意思是匹配第2个括号的值，也就是 - 或者 / 
      // \/ 其实就是/ 因为用了转义

/w 是匹配数字，字母，下划线 等价于 [0-9A-Za-z_]

() 有组的概念，()中的内容是一个整体 
[] 是依次匹配[]内的内容
{} 是限制字符，是次数

{ 2 } 确定匹配2次
{ 2,} 至少匹配2次
{ 2, 4 } 至少2次，至多4次

1、test

test方法是正则方法，参数是string，返回值是boolean，（理解为用正则去匹配字符串，判断字符串是否符合，返回值只能是true和false）

2、match

match是string方法，参数是正则表达式，返回值是数组（理解为用字符串去匹配正则，那一串字符串中可能符合项有多个，返回值是数组）

3、pattern

pattern是正则的实例，str是string的实例

用法	说明	返回值
pattern.test(str)	判断str是否包含匹配结果	返回Boolean
pattern.exec(str)	根据pattern对str进行正则匹配	返回匹配结果数组，如果匹配不到返回null
str.match(pattern)	根据pattern对str进行正则匹配	返回匹配结果数组，如果匹配不到返回null
str.replace(pattern,replacement)	根据pattern对str进行正则匹配,匹配结果替换成replacement	一个新的字符串

4、test练习：

// 判断日期是不是yyyy-MM-dd的格式，用test方法
function isDate() {
    // var str = document.getElementById('str').value.trim(); 
    var str = '2002-01-01'
    if (str.length != 0) {
        var reg = /^(\d{1,4})(-|/)(\d{1,2})\2(\d{1,2})$/; 
        if (!reg.test(str)) {
            console.log('对不起，您输入的日期格式不正确!');
        } else {
            console.log(str);
        }
    }
}
isDate();

5、match练习：

// 判断日期是不是yyyy-MM-dd的格式，用match方法
function isDate() {
    // var str = document.getElementById('str').value.trim(); 
    var str = '2002-2'
    if (str.length != 0) {
        var reg = /^(\d{1,4})(-|/)(\d{1,2})\2(\d{1,2})$/;
        var res = str.match(reg);
        if (res == null) {
            console.log('对不起，您输入的日期格式不正确!');
        } else {
            console.log(str);
        }

    }
}
isDate()

6、test()

const  boo = /\d/.test('ada221');
console.log(boo); //true 

7、exec()

exec的功能更加强大，提供更多的信息

返回数组的第一个元素是与整个正则匹配的文本 然后数组的第二个元素是与整个正则的第一个子表达式匹配的文本 第三个元素是与整个正则的第二个字表达式匹配的文本，以此类推 index是匹配文本的第一个字符的位置 input是输入的整个文本

var result = /(\d+)-(\w+)/.exec('12-ad'); // [ '12-ad', '12', 'ad', index: 0, input: '12-ad', groups: undefined ]
console.log(result);

尽管是全局匹配，但是exec方法只对指定的字符串进行一次匹配

let res = /\d/g.exec('a22');
console.log(res); // [ '2', index: 1, input: 'a22', groups: undefined ]

深入理解exec

• global: 布尔值，表示是否设置了 g 标志
• ignoreCase: 布尔值，表示是否设置了 i 标志
• lastIndex: 搜索下一个匹配项时开始的位置，从0开始
• multiline: 布尔值，表示是否设置了 m 标志
• source: 正则表达式的字符串表示

非全局匹配：

var reg = /\d/;
//第一次匹配
console.log(reg.exec('a123')); // [ '1', index: 1, input: 'a123', groups: undefined ]
console.log(reg.lastIndex); // 0
//第二次匹配
console.log(reg.exec('a123')); // [ '1', index: 1, input: 'a123', groups: undefined ]
console.log(reg.lastIndex); // 0

同一正则表达式，在非全局匹配模式下，每次实例的lastIndex值总是0 每次匹配查找都是将lastIndex做为起始位置的

全局匹配：

var reg = /\d/g;
// 第一次匹配
console.log(reg.exec('a123'));// [ '1', index: 1, input: 'a123', groups: undefined ]
console.log(reg.lastIndex);// 2
// 第二次匹配
console.log(reg.exec('a123'));// [ '2', index: 2, input: 'a123', groups: undefined ]
console.log(reg.lastIndex);// 3
// 第三次匹配
console.log(reg.exec('a123'));// [ '3', index: 3, input: 'a123', groups: undefined ]
console.log(reg.lastIndex);// 4
// 第四次匹配
console.log(reg.exec('a123'));// null
console.log(reg.lastIndex);// 0

同一正则表达式，在全局匹配模式下，每次实例的lastIndex值是匹配文本的最后一个字符的下一个位置 当exec匹配不到时，返回null，lastIndex置为0

8、match()

非全局匹配：

var a = 'aaaa'.match(/\w/);
console.log(a);// [ 'a', index: 0, input: 'aaaa', groups: undefined ]

match在非全局匹配下和exec有点相似，都有index和input属性

全局匹配：

var a = 'aaaa'.match(/\w/g);
console.log(a);// [ 'a', 'a', 'a', 'a' ]

返回所有符合匹配的子字符串的数组，index和input属性也没有了

9、replace()

这个方法必须接受2个参数：

pattern：这个参数可以是字符串也可以是正则表达式

replacement：替换匹配项的字符串或者处理函数的返回值

当没有找到匹配项，返回原来字符串

let res = 'aaaa'.replace('bbbb','b');
console.log(res); // aaaa

当pattern为字符串或者非全局对象正则表达式的时候，只能替换找到的第一个匹配项

let res = 'aaaa'.replace('a','b');
console.log(res); // baaa

当pattern是全局的正则对象的时候，替换每一项

let res = 'aaaa'.replace(/\w/g,'b');
console.log(res); // bbbb

replacement为函数的时：

let res = 'aaaa'.replace(/\w/g,function(){
    return 'b'
})
console.log(res); // bbbb

let res = 'aaaa'.replace(/\w/g,function(value){
    return value.toUpperCase();
})
console.log(res); // AAAA

函数的返回值会做为替换字符串 函数的参数有2个，第一个是每一个匹配项，第二个是每个匹配项在字符串中的位置

10、特殊的$:

字符	替换文本
$1、$2...$99	与正则表达式中第1到第99个相匹配的文本
$&	与 regexp 相匹配的子串
$`	位于匹配子串左侧的文本
$'	位于匹配子串右侧的文本
$$	直接量符号

//第一种情况
let a1 = 'aa11AA'.replace(/([a-z]+)(\d+)([A-Z]+)/g,'$1');
console.log(a1); //aa 
let a2 = 'aa11AA'.replace(/([a-z]+)(\d+)([A-Z]+)/g,'$2');
console.log(a2); //11
let a3 = 'aa11AA'.replace(/([a-z]+)(\d+)([A-Z]+)/g,'$3');
console.log(a3); //AA
//第二种情况：
let a = 'aa11AA'.replace(/([a-z]+)(\d+)([A-Z]+)/g, '$&'); 
console.log(a);//"aa11AA"
//第三种情况：
let b1 = 'aa11AA'.replace(/(\d+)/g, '$`');
console.log(b1); //"aaaaAA"
//第四种情况：
let b2 = 'aa11AA'.replace(/(\d+)/g, "$'"); 
console.log(b2);//"aaAAAA"
//第五种情况：
let b3 = 'aa11AA'.replace(/(\d+)/g, '$$'); 
console.log(b3);//"aa$AA"