概念

如何创建: 使用正则需要创建正则表达式对象，创建对象可以使用构造函数或字面量方法

构造函数：new RegExp("正则主体",[修饰符])
字面量：/正则主体/修饰符

方法

正则对象的方法

test关键字，用来检测一个字符串是否符合一定规则，返回值true和false
exec关键字，捕获匹配到的符合的第一条内容。返回一个数组，index索引表示匹配内容第一个字符出现的位置

//构造函数
let reg = new RegExp("hello");
---------------------------------------------
//字面量
let reg = /hello/g;
----------------------------------------------
let str = "hello,Javascript,Hello";
console.log(reg.exec(str));//
--------------------------------------------
console.log(reg.test(str));//true

字符串的方法

//模版字符串
let str = "Lorem ipsum dolor sitip amet";
//match()将字符串中与正则相匹配的内容捕获出来。匹配失败返回null
 console.log(str.match(/am/g));//结果：['am']
 console.log(str.match(/id/g));//结果：null
//注意：修饰符g是全局匹配，如果不加的话只会匹配到第一条符合的信息
// replace()  替换字符串
let arr = str.replace(/ip/g,"id");
console.log(arr);//结果（字符串）： Lorem idsum dolor sitid amet
//search() 找到符合条件的字符串第一次出现的位置
let index = str.search("ip");
console.log(index);//结果:6

微信截图_20211127113824.png

元字符和限定元字符

元字符

.通配符，匹配单个的任意字符
[范围] 匹配范围中的任意一个。比如：[a-z] [A-Z] [0-9] ,注意：[^范围]，取反的意思，比如：[^a-z],表示除了a-z的其余任意字符
\d 匹配单个数字相当于[0-9] , \D 匹配单个非数字，相当于[^0-9]
\w 匹配单个的数字，字母，下划线相当于[a-zA-Z0-9_];\W 匹配单个非数字，非字母，非下划线相当于 [^a-zA-Z0-9_]
\s 匹配单个空白字符空格换行（\n），制表(\t) \S 匹配单个非空白字符

限定元字符

写在普通元字符或者字母符号的后面，修饰其前面一个字符的出现次数

{m} 表示出现m次。相当于{m,m}
{m,} 没有上限，最少匹配m次。
{m,n} 至少匹配m次，最多匹配n次。
?等价于{0,1} 要么不出现，要么出现一次。
*等价于{0,} 匹配任意次（包含零次）。
+等价于{1,} 至少出现一次。

补充： 行首行尾限定符

^行首匹配必须以后面的字符开头
$行尾匹配必须以前面的字符结尾

  var pattern = /^cha$/,
  str = 'cha';
  console.log(pattern.test(str));//结果：true

贪婪和非贪婪

贪婪：当一个字符串用正则匹配的时候，会尽可能多的去匹配，正则默认所示贪婪模式。
非贪婪：当一个字符串用正则匹配的时候，会尽可能多的少的去匹配，写限定符的时候在后面加个?就行

贪婪匹配.png

非贪婪.png 推荐大家可以使用，正则表达式在线测试工具：菜鸟工具：c.runoob.com/front-end/8…

案例

校验输入强度

密码长度在8-12位
包含大写，小写，数字则为“强”
大写、小写、数字只包含一种则为“弱”
其他都是中

//css部分
 <style>
    #box {
      width: 224px;
      display: flex;
      justify-content: space-between;
    }

    #box span {
      margin-top: 10px;
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #ccc;
    }

    #box .active {
      background-color: #f00;
    }
  </style>
//html部分
 密 码：<input type="text" id="pwd"><br>
 <div id="box">
    <span>弱</span>
    <span>中</span>
    <span>强</span>
  </div>

//js部分
  const pwd = document.getElementById('pwd');
    const spans = document.querySelectorAll("#box span")
    pwd.onchange = function () {
      // trim() 清除空格
      let str = pwd.value.trim();
      if (/^[a-zA-Z0-9]{8,12}$/.test(str)) {
        //长度合适
        if (/[A-Z]/.test(str) && /[a-z]/.test(str) && /\d/.test(str)) {
          //密码强度为强
          clearOther();
          spans[2].classList.add("active")
        } else if (/^[A-Z]+$/.test(str) || /^[a-z]+$/.test(str) || /^\d+$/.test(str)) {
          //密码强度为弱
          clearOther();
          spans[0].classList.add("active")
        } else {
          clearOther();
          spans[1].classList.add("active")
        }
      } else {
        alert("密码长度应在8-12位之间。");
        pwd.value = "";//清空
        pwd.focus(); //获取焦点，重新输入
      }
    }
    function clearOther() {
      for (var i = 0; i < spans.length; i++) {
        spans[i].classList.remove("active");
      }
    }

校验输入的日期格式

匹配一个日期字符串是否符合规则：年-月-日
2021-12-01（符合） 2021-2-3（符合）2021-2-03（符合） 2021/12/01（不符合）2021-13-33 （不符合）
这里我们并没有考虑闰年和闰月的情况

 输入框：<input type="text" id="numstr"><br>
 let numstr = document.getElementById("numstr")
   numstr.onchange = function () {
      let str = numstr.value.trim();
      if (/^\d{4}-(0?[1-9]|[1][0-2])-(0?[1-9]|[1-2][0-9]|[3][0-1])$/.test(str)) {
        alert("符合")
      } else {
        alert("不符合")
      }
    }

小结

我们在写案例的时候我们用到了(a|b),我们称为分支结构，来个小例子体验下。

var regex = /^I love (JavaScript|Regular Expression)$/;
console.log( regex.test("I love JavaScript") );// => true
console.log( regex.test("I love Regular Expression") );// => true

而且我们还用到了(0?[1-9]|[1][0-2])是将字符串分组了，方便我们处理，比如如期：2014 前四位，-12 月份占两位，-28 日期占两位。相当于按位分组。

掌握了这些内容我们对js正则就算是入门了

哈哈哈别问谁说的😂，问就是我

JS-正则（入门）

概念

方法

元字符和限定元字符

元字符

限定元字符

贪婪和非贪婪

案例

校验输入强度

校验输入的日期格式

小结