5-1创建语法

5-1-1 创建 RegExp 对象的语法(了解)

  1. // var 变量 = new RegExp("正则表达式","匹配模式")
  2. var reg = new RegExp(/a/,"g");

5-1-2 使用字面量创建正则表达式

  1. // var 变量 = /正则表达式/匹配模式
  2. var reg = /a/g

5-1-3 test()

用于检测正则表达式是否匹配字符串的一部分，返回boolean值
**语法: reg.test(str)**

  1. var reg =/abc/;
  2. var str = "abcdf";
  3. console.log(reg.test(str));  //true

5-2字符集

5-2-1 备选字符集

定义：规定某一位字符的备选字符列表

  1. [ ] ：规定的是某一位字符的备选字符列表
  2. 特点:必须且只能多选一
  1. var str ="上海，上天，上哪里去";
  2. var reg =/上[海天]/g
  3. console.log(str.replace(reg,"*"));

5-2-2 预定义字符集

定义：针对常用的备选字符集提供的简化符号

\d [0-9]
\w [0-9a-zA-Z] 任意数字、字母、下划线
\s 空格
. 表示 所有字符
[A-z] 任意字母
g 全局过滤
i 忽略大小写 
  1. var str = "_ashdl8976hdjs"
  2. var reg = /\d/g;
  3. var reg2 = /\w/g;
  4. console.log(str.replace(reg,"*"));
  5. console.log(str.replace(reg2,"*"));

5-2-3转义字符

定义：遇到一些特殊的字符需要处理,可以在前面加上转义字符

  1. 在正则中 使用 \ 作为转义字符
  2. \.  表示 .
  3. \\  表示 \
  4. \/  表示 /

5-3量词

* 重复零次或多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或者更多次
{n,m} 重复n到m次

5-3-1 代码

  1.  var pwd ="1233klshfjds"  // 5-7位
  2.  var reg = /[0-9]{5,7}/g 
  3.  var reg2 = /[0-9]{4,}/g
  4.  console.log(reg.test(pwd)); // false
  5.  console.log(reg2.test(pwd)) // true

5-3-2 贪婪模式和懒惰模式

  1. // 给量词的情况下，默认取最大值，默认是贪婪的
  2. var str = '123123123hello'
  3. var reg = /\d{3,6}/
  4. console.log(str.replace(reg,'*'));    //*123hello
  5. //test 只要正则表达式某一段满足则输出为true
  6. console.log(reg.test(str));                    //true

* 和 + 限定符都是贪婪的，因为它们会尽可能多的匹配文字，
只有在它们的后面加上一个 ? 就可以实现非贪婪或最小匹配。

  1. // 懒惰模式  取最小值
  2. var str = "123123123hello"
  3. var reg = /\d{3,6}?/
  4. console.log(str.replace(reg,"*")); // *123123hello

5-4选择和分组

5-4-1 选择dd

  1. var str = "你去哪里,他在..."
  2. var reg = /你去|他在/g
  3. console.log(str.replace(reg, "*"));

5-4-2 分组

  1. var url1 = 'http://www.baidu.com'
  2. var url2 = 'https://www.baidu.com'
  3. var reg = /(http|https):\/\/www\.baidu\.com/;
  4. console.log(reg.test(url1));        //true
  5. console.log(reg.test(url2));        //true

5-5指定匹配模式

  1. ^:  开头
  2. $:  结尾
  3. /* 严格匹配  ^reg$   */

5-5-1 严格模式^reg&

  1. var phone = '02788667777'
  2. var reg = /^(027)?8\d{7}$/
  3. console.log(reg.test(phone));    //true
  1.     <input type="text" id="app">
  2.     <script>
  3.         /**
  4.          * 电话号
  5.          * ^(086)?1[3-9]\d{9}$
  6.         */
  7.         var reg = /^(086)?1[3-9]\d{9}$/;
  8.         $("#app").keyup(function (e) {
  9.             if (e.keyCode == 13) {
  10.                 var value = $(this).val();
  11.                 console.log(reg.test(value));
  13.                 $(this).val("");
  14.             }
  15.         })
  16.     </script>

5-5-2 去掉字符串前后的空格

  1. // 字符串的方法：  trim() 去除字符串前后的空格
  2. // 正则表达式：    /^\s+|\s+$/g
  1. var str = '     hello   ';
  2. var reg = /(^\s+)|(\s+$)/g
  3. console.log(str.replace(reg,""));
  4. /

5-6非 ^

如果中括号里面有^ 表示取反的意思

5-6-1 只获取字母

  1. var str = "hello210874"
  2. // 只获取字母
  3. var reg = /[^a-z]/g
  4. console.log(str.replace(reg,""));

5-6-2 只获取数字

  1. var str = "https://movie.douban.com/subject/1292052/"
  2. // 只获取数字
  3. var reg = /[^\d+]/g
  4. console.log(str.replace(reg,""));

5-6-3 过滤标签

  1. var str = "<p>我是p标签</p><br><div>我是div</div>"
  2. var reg = /<[^<>]+>/g
  3. console.log(str.replace(reg,""));

案例

1.身份证验证

  1. var reg=/^(42|35)\d{15}[\dx]$/
  3.       var str="35022219990602201x";
  5.       console.log(reg.test(str));

2.表单密码判断

  1.   var reg=/^[a-zA-Z]{6,}$/
  3.     $("#app").keydown(function(e){  
  5.         if(e.keyCode==13){
  6.             var value=$(this).val();
  7.             console.log(reg.test(value));
  8.         }
  9.     })

3.邮箱验证

  1.        var reg=/^\w+@[a-z]+\.com$/
  3.            $("#app").keydown(function(e){
  4.              if(e.keyCode==13){
  5.                var value= $(this).val();
  6.                console.log(reg.test(value));
  7.              }
  9.            })

4.去除html标签

  1.     var str="<p>风扇呦西</p><br/><span>666</span>";
  2.      var reg=/<[^<>]+>/g
  3.     console.log(str.replace(reg,""));

5.根据地址获取数字数组对象(for循环)

  1.    var url="https://movie.douban.com/subject/1292052/";
  2.      var reg=/[^0-9]/g
  3.      var arr=url.replace(reg,"");
  4.      var test=[];
  5.      for(var i=0;i<arr.length;i+=2){
  6.            test.push(arr.slice(i,i+2));
  7.      }
  8.      console.log(test);

6.

  1.   var str="剧情,犯罪,月黑风高"
  2.   var arr= str.split(",")
  3. var res=[];
  4. arr.forEach(name=>{
  5.      name.name=name;
  6.      res.push({
  7.        name:name
  8.      })
  10. })
  11.   console.log(res);

7.遍历对象

  1.    var obj={
  2.         top250:["你好666","他的666"],
  3.         comingSoon:["防抖111","节流111"],
  4.         thieaters:["放大镜222","防静电222"]
  5.     }
  6.     var arr=[];
  7.   for(var i in obj){
  8.       arr.push(...obj[i])
  9.   }
  10. console.log(arr);
  11.   var rgb=/[\d]/g
  12. var res=[];
  13. arr.forEach(name=>{
  14.    name=name.replace(rgb,"");
  15.    res.push({
  16.        name
  17.    })
  18.    console.log(name);
  19. })
  20. console.log(res);

8.

  1.    var str=`<span>9.7</span><span>-248人评价</span><br>
  2.              <span>9.7</span><span>-48人评价</span>
  3.              <br><span>9.6</span><span>-508人评价</span>
  5.    `;
  8.  var arr=str.split("<br>");
  9.  var reg= /<[^<>]+>/g;
  10.  var re1=/[^\d-/.]/g;
  11. //  console.log(arr.replace(reg,""));
  12. var res=[];
  13.  arr.forEach(item=>{
  14.  item = item.replace(reg,"").trim().replace(re1,"").split("-");
  16.  res.push({
  18.     star:item[0],
  19.     rating:item[1]
  20.  })
  22.    console.log(item);
  23.     //   console.log(item.trim());
  24.  })
  25. console.log(res);

9.

  1.    var str=`
  2.      [{"name":"李四666","data":[2019,10,11]},
  3.      {"name":"王五666","data":[2019,10,11]},
  4.      {"name":"赵六666","data":[2019,10,11]}
  5.     ]
  6.    `
  7.   var arr=JSON.parse(str);
  8.   console.log(arr);
  9.  var list=[];
  10.    arr.forEach(item => {
  12.     var {name,data}=item;
  13.     name =name.replace(/\d/g,"")+"...";
  14.     data =data.join("-")
  16.     list.push({
  17.         name,
  18.         data
  19.     })
  20.    });   
  21.    console.log(list);

10.

  2.     var arr=[
  3.        {name:"list"},
  4.        {name:"html"},
  5.        {name:"css"},
  6.        {name:"vue"},
  7.        {name:"vue"},
  8.        {name:"html"},
  9.     ]
  10.     var list=[];
  11.     arr.forEach(item=>{
  12.     var {name} =item;
  13.     if(!list.includes(name)){
  14.             list.push(name)
  15.     }
  17.     })

11.

  1.   var arr= {
  2.     A:[{city:"武汉"},{city:"广州"}],
  3.     B:[{city:"深圳"},{city:"广州"}],
  4.     C:[{city:"上海"},{city:"武汉"}]
  5.     }
  6.    var list=[];
  8.   for(var i in arr){
  9.     console.log(arr[i]);
  10.       list.push(...arr[i])
  11.   }
  12.   console.log(list);
  13.   var res=[];
  15.   list.forEach(item=>{
  16.     var{city}=item;
  17.     if(!res.includes(city)){
  18.         res.push(city);
  19.     }
  21.   })
  22. console.log(res);

12.

  1.   var arr= {
  2.     A:[{city:"武汉"},{city:"广州"}],
  3.     B:[{city:"深圳"},{city:"广州"}],
  4.     C:[{city:"上海"},{city:"武汉"}]
  5.     }
  6.    var list=[];
  7.    var values=Object.values(arr);
  8.    console.log(values);
  9.      values.forEach(item => {
  10.          item.forEach(f=>{
  11.              var{city}=f;
  12.              if(!item.includes(city)){
  13.                 list.push(city)
  14.              } 
  16.          })
  18.      });
  19. console.log(list);