辅助工具

  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

  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);
  66.     /****** 重复 ********/
  67.     // 1. ?匹配0次或1次
  68.     var reg1 = /^https?:\/\//;
  69.     var str1 = 'http://asdfasdf';
  70.     var str1_2 = 'https://asdfasdf';
  71.     reg1.test(str1);  // true
  72.     reg1.test(str1_2); // true
  74.     // 2. +匹配一次或多次
  75.     var reg2 = /a+/;
  76.     var str = 'dfsdfsdfaasdafsaaaf';
  77.     reg2.test(str);
  79.     // 3. *匹配0次到多次
  80.     var reg3 = /^https?:\/\/.*/;
  81.     var str = 'http://asdfasdf';
  83.     // 4.{n} 重复n次
  84.     var reg4 = /^1\d{10}$/;
  85.     var str4 = '13800000000';
  86.     reg4.test(str4); 
  88.         // 5. {n,}
  89.         // 6. {m,n}
  91. </script>

(四) 分组

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

  1. <script>
  2.     // 1.括号表示一个整体
  3.     var reg = /^(0|86|17951)?1\d{10}/;
  4.     var str = '8613811111111';
  5.     reg.test(str);
  7.     // 2. 分组
  8.     var reg2 = /(a{3})(b{4})-\1\2/;
  9.     var str2 = 'aaabbbb-aaabbbb';
  10.     reg2.test(str2);
  12.     // 3.字符串替换分组
  13.     // var reg3 = /(\d{3})(\d{4})(\d{4})/;
  14.     var str3 = '15013795530';
  15.     str3.replace(/(\d{3})(\d{4})(\d{4})/,'$1****$3');
  16. </script>

五、贪婪匹配和惰性匹配

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

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

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

    1. 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" />';
    2.  var res = str.match(/http.*jpeg/g);
    3.  console.log(res);

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

    1. <script>
    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" />';
    3.  var res = str.match(/http.*?jpeg/g);
    4.  console.log(res);
    5. </script>

    正则表达式解读

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

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

  3. /\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*/ ```

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

  9. ([-.]\w+)* 同上 ```

  10. /^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_-?))$