辅助工具

1.在线匹配 正则表达式在线测试 | 菜鸟工具

2.百度前端助手

1. soft.huruqing.cn(或者其它地方) 去下载, 然后解压
2. 打开chrome浏览器: 右上角省略号 -> 更多工具 -> 扩展程序 -> 打开开发者模式 -> 加载已解压的扩展程序

一.创建正则表达式对象

什么是正则表达式?

答:正则表达式就是用来检索和替换那些符合规则的文本.

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

1.字面量方式

2.new关键字

3.正则参数

<script>
       //1.字面量创建正则表达式
       // /web/,匹配的字符串只要含有web就能返回true;
       //匹配的方式为表达式.test(用来匹配的字符串);
       var reg = /web/;
       var str1 = 'sbsbsbsweb';
       console.log(reg.test(str1));  //true;

       //2.使用new的方式创建正则表达式
       var reg2 = new  RegExp('java');
       var str2 = 'jsbsbsbsjava';
       console.log(reg2.test(str2)); //true


       //3.正则参数 i:不区分大小写 g:全局匹配 m:多行匹配
       var reg3 = /WeB/i;
       var str3 = 'wEbsbsbs';
       console.log(reg3.test(str3)); //true;

       var str = 'abcabcabc';
       var result = str.match(/a/g);
       console.log(result);
</script> 

二.常用匹配规则

1.元字符

1,任意字符.

2.\w 字母,数字,下划线

3.\s 任意空白字符

4.\d 匹配数字,等同于[0-9]

5.\D匹配非数字,等同于[^0-9]

6.|或匹配,如/x|y/正则可匹配x或y两个字符

7.^匹配字符串的开始

8.$匹配字符串的结束

9.[abc]表示 包含里面的任意一个

10.\x 转义字符

<script>
        //1.  .匹配任意字符
        var reg1 = /./;
        var str1 = 'as';
        console.log(reg1.test(str1)); //true

        //2. \w匹配字母,数字,下划线
        var reg2 = /\w\w\w/;
        var str2 = 'sbsbs';
        console.log(reg2.test(str2));  //true;

        //3.  \s 任意空白字符
        var reg3 = /ab\sab/;
        var str3 = 'ab ab';
        console.log(reg3.test(str3)); //true;

        //4. \d匹配数字
        var reg4 = /\d\d/;
        var str4 = '123';
        console.log(reg4.test(str4)); //true;

        //5. \D 匹配非数字
        var reg5 = /\D/;
        var str5 = 's';
        console.log(reg5.test(str5));

        //6. | 或者
        var reg6 = /a|b/
        var str6_1 = 'ac';
        var str6_2 =  'bc';
        console.log(reg6.test(str6_1));
        console.log(reg6.test(str6_2));

       
</script>

2.反义字符

1.[^x]匹配除'x'之外的所有字符,其中'x'可以为任意字符

2.[^xyz]同上.匹配除'x,y,z'之外的任意字符

三.重复匹配

1.?重复出现一次或零次

2.+重复出现一次或多次

3.*重复出现任意次

4.{n}重复出现n次

5.{n,}至少复习出现n次

6.{m,n}重复出现m到n次,其中.m<n

 <script>
      //1. `?`重复出现一次或零次
      var reg1 = /^https?:\/\//;
      var str1 = "https://dasdas"; //此s可有可无
      console.log(reg1.test(str1));

      //2. `+` 重复出现一次或多次
      var reg2 = /a+/; // 表示a必须出现1次或以上
      var str1 = "ss"; //false
      var str2 = "ssaaa";
      console.log("boo1", reg2.test(str1), reg2.test(str2));

      //3. `*` 重复出现零次或多次
      var reg3 = /a*/;
      var str1 = "sssa";

      var str2 = "ssaaa";
      console.log("boo3", reg3.test(str1), reg3.test(str2));

      //4. {n} 重复出现 n 次
      var reg4 = /^\d{4}-\d{2}-\d{2}$/;
      var str = "2021-06-06";
      console.log("boo4", reg4.test(str));

      var reg4 = /\d{4}-\d\d?-\d\d?/;
      var str = "2021-6-6";
      console.log("boo4", reg4.test(str));

      //5. {n,} 至少重复出现 n 次

      //6. {m,n} 重复重现 m 到 n 次，其中，m<n
      var reg6 = /a{2,4}/;
      var str = "aabcd";
</script>

四.正则表达式的运用

字符串的替换
<script>
        var str= 'asdfasdfasdfwebasdfasdfasdfwebasdfasdfasdfWeb';
        str=str.replace(/web/gi,'web前端工程师');
        console.log(str);
</script>

查找符合正则的条件的内容,举例:把网页中的所有的图片找出来
<script>
        var str = document.body.innerHTML;
        str = str.match(/https?:\/\/.*?\.(png|jpeg|gif)/g);
</script>

五.分组

1.用括号分组

2.分组的应用

<script>
    // 1.括号表示一个整体
   

    // 2. 分组
    

    // 3.字符串替换分组
	var str = '13812345678';
	var newStr = str.replace(/(\d{3})(\d{4})(\d{4})/,'$1****$3');
	console.log(newStr);
</script>

五.贪婪匹配和惰性匹配

1. 字符串的match方法，可以检查匹配了几次

   var str = 'asdfasdfasdfasdfasdf';
    var list = str.match(/a/g);
    console.log(list);

2. 贪婪匹配，尽可能多的匹配(默认贪婪匹配)

   var str = document.body.innerHTML;
   str.match(/https?:\/\/.*\.(png|jpeg|gif)/g); // 贪婪匹配, 只能得到一个匹配项
   

3. 懒惰匹配，尽可能少的匹配, 在重复的后面加?即可

 var str = document.body.innerHTML;
str.match(/https?:\/\/.*\.(png|jpeg|gif)/g); // 懒惰匹配, 可以得到多个匹配项