辅助工具

  1. 在线匹配 https://c.runoob.com/front-end/854/
  2. 百度前端助手

    (一)创建正则表达式对象

1.1 字面量方式
1.2 new 关键字
1.3 字符串全局替换

  1. <script>
  2.     // 1 字面量方式创建正则表达式 
  3.     var reg = /web/;  // 次正则的意思是:只要字符串含有web就满足条件
  4.     var str = 'asdfasdfas23423lwebsadfasdfas';
  5.     // 使用test方法检查字符串是否满足正则表达式的规则
  6.     console.log('reg',reg.test(str));  // 满足条件就返回true,否则就返回false
  8.     // 2 正则表达式参数 i-不区分大小写 g-全部 m-多行
  9.     var reg2 = /web/i;  
  10.     var str2 = 'aaWeBaaa';
  11.     console.log('reg2',reg2.test(str2));
  13.     // 3 字符串替换
  14.     var str3 = 'web前端22222222222web前端333333333333web前端';
  15.     var newStr3 = str3.replace(/web前端/g,'java');
  16.     console.log('newStr3',newStr3);
  18.     // 4 使用构造函数创建正则表达式对象
  19.     var reg4 = new RegExp('web','i');
  20.     var str4 = '222web2222222web222';
  21.     console.log('reg4',reg4.test(str4));  // true 
  22. </script>

(二)常用匹配规则

2.1 元字符

  1. 任意字符 .
  2. \w 字母、数字、下划线
  3. \s 任意空白字符
  4. \d 匹配数字，等同于[0-9]
  5. \D 匹配非数字，等同于[^0-9]
  6. | 或匹配，如 /x|y/ 正则可匹配 x 或 y 两个字符
  7. ^ 匹配字符串的开始
  8. $ 匹配字符串的结束
  9. [abc] 表示 包含里面的任意一个
  1. <script>
  2.     // 1. .匹配任意字符
  3.     var reg1 = /./;
  4.     var str = 'asdfasdf';
  5.     reg1.test(str); // true
  7.     // 2. \w匹配字母,数字,下划线
  8.     var reg2 = /\w\w\w/;
  9.     var str2 = 'asdf';  
  10.     reg2.test(str2); // true
  12.     // 3. \s 任意空白字符
  13.     var reg3 = /ab\sab/;
  14.     var str3 = 'ab  ab'; 
  15.     reg3.test(str3);  // false ab与ab之间只能有一个空格
  17.     // 4. \d 匹配数字
  18.     var reg4 = /\d\d/;
  19.     var str = '1234';  
  20.     reg4.test(str);  // true
  22.     // 5. \D 匹配非数字
  23.     var reg5 = /^\D$/;
  24.     var str5 = '23423a234234'; 
  25.     reg5.test(str5); // true 
  27.     // 6. | 或者
  28.     var reg6 = /13|18/;
  29.     var str6 = '1388888';
  30.     reg6.test(str6);
  31.     var str6 = '18234234'
  32.     reg6.test(str6);
  34.     var reg6 = /abc|xyz/;
  35.     var str6 = 'asdfasdabcasdf';
  36.     reg6.test(str6);
  38.     // 7. ^匹配开始
  39.     var reg7 = /^web/;
  40.     var str7 = 'asdfasdfwebasdfasdf';
  41.     var str7_2 = 'webasdfasdf';
  42.     reg7.test(str7);  // false
  43.     reg7.test(str7_2); // true
  45.     // 8. $匹配结尾 
  46.      var reg8 = /^j\w\dt$/;
  47.     var str8 = 'ja4t'; 
  48.     reg8.test(str8);  // true 
  50.     // 9. [abc] 只要包含abc任意一个字符都能匹配
  51.     var reg9 = /[abc]/;
  52.     var str9 = '2322alll';
  53.     reg9.test(str9);
  55.     // 10. [^x] 只要有一个不是x的字符都能匹配
  56.     var reg10 = /[^x]/;
  57.     var str10 = 'asdf';
  58.     reg10.test(str10);
  60.     // 11. [^abc] 只要有一个不是a,b,c的字符都能匹配
  61.     var reg11 = /[^abc]/;
  62.     var str11 = 'asdf';
  63.     reg11.test(str11);
  64. </script>

2.2 反义字符

  1. [^x] 匹配除“x”之外的所有字符，其中“x”可以为任意字符
  2. [^xyz] 同上，匹配除“x、y、z”之外的任意字符

(三)重复匹配

3.1 ？ 重复出现零次或一次
3.2 + 重复出现一次或多次
3.3 * 重复出现零次或多次
3.4 {n} 重复出现 n 次
3.5 {n,} 至少重复出现 n 次
3.6 {m,n} 重复重现 m 到 n 次，其中，m<n

<script>
    // 1. .匹配任意字符
    var reg1 = /./;
    var str = 'asdfasdf';
    reg1.test(str); // true

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

    // 3. \s 任意空白字符
    var reg3 = /ab\sab/;
    var str3 = 'ab  ab'; 
    reg3.test(str3);  // false ab与ab之间只能有一个空格

    // 4. \d 匹配数字
    var reg4 = /\d\d/;
    var str = '1234';  
    reg4.test(str);  // true

    // 5. \D 匹配非数字
    var reg5 = /^\D$/;
    var str5 = '23423a234234'; 
    reg5.test(str5); // true 

    // 6. | 或者
    var reg6 = /13|18/;
    var str6 = '1388888';
    reg6.test(str6);
    var str6 = '18234234'
    reg6.test(str6);

    var reg6 = /abc|xyz/;
    var str6 = 'asdfasdabcasdf';
    reg6.test(str6);

    // 7. ^匹配开始
    var reg7 = /^web/;
    var str7 = 'asdfasdfwebasdfasdf';
    var str7_2 = 'webasdfasdf';
    reg7.test(str7);  // false
    reg7.test(str7_2); // true

    // 8. $匹配结尾 
     var reg8 = /^j\w\dt$/;
    var str8 = 'ja4t'; 
    reg8.test(str8);  // true 

    // 9. [abc] 只要包含abc任意一个字符都能匹配
    var reg9 = /[abc]/;
    var str9 = '2322alll';
    reg9.test(str9);

    // 10. [^x] 只要有一个不是x的字符都能匹配
    var reg10 = /[^x]/;
    var str10 = 'asdf';
    reg10.test(str10);

    // 11. [^abc] 只要有一个不是a,b,c的字符都能匹配
    var reg11 = /[^abc]/;
    var str11 = 'asdf';
    reg11.test(str11);


    /****** 重复 ********/
    // 1. ?匹配0次或1次
    var reg1 = /^https?:\/\//;
    var str1 = 'http://asdfasdf';
    var str1_2 = 'https://asdfasdf';
    reg1.test(str1);  // true
    reg1.test(str1_2); // true

    // 2. +匹配一次或多次
    var reg2 = /a+/;
    var str = 'dfsdfsdfaasdafsaaaf';
    reg2.test(str);

    // 3. *匹配0次到多次
    var reg3 = /^https?:\/\/.*/;
    var str = 'http://asdfasdf';

    // 4.{n} 重复n次
    var reg4 = /^1\d{10}$/;
    var str4 = '13800000000';
    reg4.test(str4); 

        // 5. {n,}
        // 6. {m,n}

</script>

(四) 分组

4.1 用括号分组
4.2 分组的应用

<script>
    // 1.括号表示一个整体
    var reg = /^(0|86|17951)?1\d{10}/;
    var str = '8613811111111';
    reg.test(str);

    // 2. 分组
    var reg2 = /(a{3})(b{4})-\1\2/;
    var str2 = 'aaabbbb-aaabbbb';
    reg2.test(str2);

    // 3.字符串替换分组
    // var reg3 = /(\d{3})(\d{4})(\d{4})/;
    var str3 = '15013795530';
    str3.replace(/(\d{3})(\d{4})(\d{4})/,'$1****$3');
</script>

五、贪婪匹配和惰性匹配

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

    var str = 'a3abbba4a';
var res = str.match(/a\da/g);
console.log(res); // ['a3a','a4a']

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

    var str = '<img src="http://static.huruqing.cn/fresh/banner1.jpeg" /> <img src="http://static.huruqing.cn/fresh/banner2.jpeg" /> <img src="http://static.huruqing.cn/fresh/banner3.jpeg" />';
 var res = str.match(/http.*jpeg/g);
 console.log(res);

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

    <script>
 var str = '<img src="http://static.huruqing.cn/fresh/banner1.jpeg" /> <img src="http://static.huruqing.cn/fresh/banner2.jpeg" /> <img src="http://static.huruqing.cn/fresh/banner3.jpeg" />';
 var res = str.match(/http.*?jpeg/g);
 console.log(res);
</script>

    正则表达式解读

  4. /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/ ```

  5. ^(0|86|17951)? 括号内容0次到1次
  6. (13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]) 手机号码前三位
  7. [0-9]{8}$ 后8位

2. `/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/`
```javascript
1. \w+ 数字,字母,下划线一次或多次
2. ([-+.]\w+)* 
  - 括号内的东西0次或多次
    - -+.任意一个
  - 数字,字母,下划线一次或多次
3. @\w+ 同上
4. ([-.]\w+)* 类似第2点
5. \.\w+  . 同上
6. ([-.]\w+)* 同上

  1. /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i

      1. ^https?:\/\/ http:// 或者https://
    2. (([a-zA-Z0-9_-])+(.)?)*
      1. ([a-zA-Z0-9_-])+ 字母,数字,下划线,- 一个或多个
      2. (.)? .一次或0次
    3. (:\d+)?
    4. (\/((.)?(\?)?=?&?a-zA-Z0-9_-?))$

      作业

  2. 判断以下正则的值, 并自行验证 ```javascript // 说出正则表达式的含义,写出下面匹配的结果 /* 一元字符 **/ var reg = /b..k/; var str = “books”; var str2 = “boooks”; reg.test(str);
    reg.test(str2);

// var reg = /t\wq/; var str1 = “2222t2qkkk”; var str2 = “aaaaat$qbbbbb”; reg.test(str1); reg.test(str2);

var reg = /\Dook/; var str = “8ook”; reg.test(str);

var reg = /java\sscript/; var str = “study java script”; reg.test(str);

var reg = /javascript|html|css/; var str = “study javascript”; reg.test(str);

/* 匹配开始和结束 */ var reg = /^huruqing/; var str = “huruqing123456”; reg.test(str);

var reg = /^huruqing$/; var str = “huruqing123456”; reg.test(str);

/* 重复 */ var reg = /bo?k/; var str = “book”; reg.test(str);

var reg = /bo*k/; var str = “boook”; reg.test(str);

//+ 前面子表达式出现1次或多次 var reg = /bo+k/; var str = “boook”; reg.test(str);

//{m,n}最少出现m次,最多出现n次 var reg = /bo{2,4}k/; var str = “boooook”; reg.test(str);

//{m,}最少出现m次 var reg = /bo{2,}k/; var str = “boooook”; reg.test(str);

//{m}正好出现m次 var reg = /bo{2}k/; var str = “boook”; reg.test(str); /** 反义 **/ var reg = /o[^usb]t/; var str = “oat”; reg.test(str);

var reg = /[a-zA-Z0-9]ook/; var str = “8ook”; reg.test(str);
```

  1. 编写一个用户名的正则，要求：
    1. 大写字母开头
    2. 其它字符可以是数字，字母，下划线
    3. 8到20个字符