跳至主要內容

正则表达式

Mr.Chen前端基石JS基础正则表达式大约 7 分钟约 2034 字

// TODO 重新学习

正则表达式(regular expression)描述了字符串的“构成模式”，经常被用于检查字符串是否符合预定的格式要求

正则表达式“按位”描述规则，是指它是一位一位的描述字符串的构成形式

正则表达式可以调用 test()方法，检查某字符串是否符合正则表达式规定的规则

正则表达式的创建

  • 使用/内容/的语法形式，可以快速创建正则表达式
  • 也可以使用 new RegExp('内容')的形式，创建正则表达式(这种写法有坑！) ::: danger 警告 如果使用 new RegExp() 写法，反斜杠需要多写一个，比如/^\d$/和 new RegExp（'^\\d$'）是相同的意思 :::
  • 使用 typeof 运算符检查正则表达式的类型，结果是 object

元字符

"元字符”是指 一位 指定类型的字符

元字符
元字符

开头和结尾

元字符2
元字符2

元字符：|

正则中使用竖线" | "表示或，表示只匹配指定几项之间的一项

eg:只匹配纯数字或纯字母

var str1 = '1111'
var str2 = 'imooc'
var str3 = '1111imooc'
var reg = /^\d+$|^[a-zA-Z]+$/
console.log(reg.test(str1)) // true
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // false

::: warning 注意 反斜杠用来在文本字符串中插入省略号、换行符、引号和其他特殊字符。在 JavaScript 中，字符串使用单引号或者双引号来起始或者结束。 :::

var txt="We are the so-called "Vikings" from the north."
console.log(txt)

这意味着上面的字符串将被截为：We are the so-called。要解决这个问题，就必须把在 "Viking" 中的引号前面加上反斜杠。这样就可以把每个双引号转换为字面上的字符串。

下面的表格列出了其余的特殊字符，这些特殊字符都可以使用反斜杠来添加到文本字符串中：

特殊字符 ::: tip 最佳实践 不管一个符号有没有特殊意义，都可以在其之前加上一个\以确保它表达的是这个符号本身 :::

eg 某产品批号形式为：123.45^67#89，请使用正则表达式检查某字符串是否符合此格式 ::: tip 提示 .(点)必须前加\，因为在正则表达式中元字符.代表匹配任意字符 :::

const reg = /^123\.45\^67\#89$/
const n1 = '123.45^67#19'
console.log(reg.test(n1)) //false

方括号表示法

使用方括号，比如[xyz]，可以创建个字符集合，表示匹配方括号中的任意字符

eg:比如某学校的学号规定：第 1 位是一个字母，b 表示本科生， y 表示研究生，后面是 7 位数字，用正则表示为:

;/^[by]\d{7}$/ //{7}为量词

::: tip 提示 可以使用短横-来指定一个字符范围，^表示否定 ::: 方括号表示法

量词

量词
量词

eg 请验证字符串是否符合手机号码的规则：11 位数字，并且肯定以 1 开头

;/^1\d{10}$/

修饰符

修饰符也叫作标志（flags），用于使用正则表达式实现高级搜索

修饰符
修饰符

修饰符的使用：

修饰符的使用
修饰符的使用

正则表达式的相关方法

正则式方法
正则式方法

exec() ::: warning 注意 只有一个结果原因：没有加 g 修饰符 :::

exec()方法最有趣的是，有"g′修饰符的正则表达式将自动成为“有状态”的，这意味着可以对单个字符串中的多次匹配结果进行逐条的遍历

exec遍历
exec遍历

字符串的相关方法

字符串的相关正则方法
字符串的相关正则方法
var str = 'abc123def4567ghi89'
// search()方法，很像indexOf()，返回查找到的第一个下标，如果找不到就是-1
var result1 = str.search(/\d+/g)
var result2 = str.search(/m/g)
console.log(result1) // 3
console.log(result2) // -1
// match()方法，返回查找到的数组，找不到就是null
var result3 = str.match(/\d+/g)
console.log(result3) // ["123", "4567", "89"]
// replace()方法，进行替换
var result4 = str.replace(/[a-z]+/g, '*') // 注意+表示贪婪的，尽可能多的连续匹配小写字母
console.log(result4) // *123*4567*89

// split()方法，进行字符串拆为数组
var result5 = str.split(/\d+/g)
console.log(result5) // ["abc", "def", "ghi", ""]

正则的应用

实际上，很多正则表达式不需要我们自己写，可以通过搜索引擎查找，可以拿来即用

表单验证 DEMO

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
    <style>
      body {
        font-size: 13px;
      }

      .form {
        width: 520px;
        padding: 20px 50px;
        margin: 50px auto;
        border: 2px solid orange;
        border-radius: 10px;
      }

      .form p {
        margin-bottom: 30px;
      }

      .form input {
        width: 180px;
        margin-right: 15px;
      }

      .form .required {
        color: red;
      }

      .form .nameField {
        margin-left: 5px;
      }

      .form .tips {
        color: orange;
      }

      .form .strength {
        width: 35px;
        height: 5px;
        background-color: rgb(209, 207, 207);
        display: inline-block;
      }

      .form .warning {
        color: red;
        margin-left: 10px;
        display: none;
      }

      .form .submit {
        width: 200px;
        height: 35px;
        margin-left: 160px;
        border: none;
        outline: none;
        background-color: #ff6500;
        color: white;
        border-radius: 6px;
        cursor: pointer;
      }

      .form .submit:hover {
        background-color: #ff9900;
      }
    </style>
  </head>

  <body>
    <div class="form">
      <p>
        <span class="required">*</span>用&nbsp;户&nbsp;名：
        <input
          type="text"
          class="nameField"
          id="nameField"
          placeholder="用户名设置成功后不可修改"
        />
        <span class="tips" id="tips">6-30位字母、数字或“_”，字母开头</span>
      </p>
      <p>
        <span class="required">*</span>登陆密码：
        <input type="password" id="passWord" placeholder="6-20位字母或数字" />
        <span class="strength" id="level1"></span>
        <span class="strength" id="level2"></span>
        <span class="strength" id="level3"></span>
        <span class="warning" id="warning">6-20位字母或数字</span>
      </p>
      <p>
        <span class="required">*</span>确认密码：
        <input
          type="password"
          id="confirmPsw"
          placeholder="再次输入您的登录密码"
        />
        <span id="dif"></span>
      </p>
      <button class="submit" id="submit">注册</button>
    </div>

    <script>
      // 用户名输入框
      var nameField = document.getElementById('nameField')
      var tips = document.getElementById('tips')
      var verifyName = false

      nameField.onblur = function () {
        if (/^[a-zA-Z]\w{5,29}$/.test(nameField.value)) {
          // 正确
          tips.innerText = '用户名输入正确'
          tips.style.color = 'green'
          verifyName = true
        } else {
          // 错误
          tips.innerText = '6-30位字母、数字或“_”，字母开头'
          tips.style.color = 'red'
          verifyName = false
        }
      }

      // 密码输入框
      var passWord = document.getElementById('passWord')
      var level1 = document.getElementById('level1')
      var level2 = document.getElementById('level2')
      var level3 = document.getElementById('level3')
      var warning = document.getElementById('warning')
      var verifyPsw = false

      passWord.onblur = function () {
        if (/^[a-zA-Z0-9]{6,20}$/.test(passWord.value)) {
          // 正确
          warning.style.display = 'none'
          verifyPsw = true
          if (
            /^[0-9]{6,20}$/.test(passWord.value) ||
            /^[a-z]{6,20}$/.test(passWord.value) ||
            /^[A-Z]{6,20}$/.test(passWord.value)
          ) {
            // 密码强度低
            level1.style.backgroundColor = 'red'
            level2.style.backgroundColor = 'rgb(209, 207, 207)'
            level3.style.backgroundColor = 'rgb(209, 207, 207)'
          } else if (
            /^[0-9a-z]{6,20}$/.test(passWord.value) ||
            /^[0-9A-Z]{6,20}$/.test(passWord.value) ||
            /^[a-zA-Z]{6,20}$/.test(passWord.value)
          ) {
            // 密码强度一般
            level1.style.backgroundColor = 'red'
            level2.style.backgroundColor = 'orange'
            level3.style.backgroundColor = 'rgb(209, 207, 207)'
          } else {
            // 密码强度高
            level1.style.backgroundColor = 'red'
            level2.style.backgroundColor = 'orange'
            level3.style.backgroundColor = 'green'
          }
        } else {
          // 错误
          verifyPsw = false
          warning.style.display = 'inline'
          level1.style.backgroundColor = 'rgb(209, 207, 207)'
          level2.style.backgroundColor = 'rgb(209, 207, 207)'
          level3.style.backgroundColor = 'rgb(209, 207, 207)'
        }
      }

      // 密码确认框
      var confirmPsw = document.getElementById('confirmPsw')
      var dif = document.getElementById('dif')
      var verifyConfirm = false

      confirmPsw.onblur = function () {
        if (!confirmPsw.value) {
          // 空
          dif.innerText = '输入框不能为空'
          dif.style.color = 'red'
          verifyConfirm = false
        } else if (confirmPsw.value != passWord.value) {
          // 不一致
          dif.innerText = '两次密码输入不一致，请重新输入'
          dif.style.color = 'red'
          verifyConfirm = false
        } else {
          // 一致
          dif.innerText = '两次输入一致'
          dif.style.color = 'green'
          verifyConfirm = true
        }
      }

      // 注册按钮
      var submit = document.getElementById('submit')

      submit.onclick = function () {
        if (verifyName && verifyPsw && verifyConfirm) {
          // 满足条件
          alert('信息填写正确')
        } else {
          // 不满足条件
          alert('请填写正确的信息')
        }
      }
    </script>
  </body>
</html>

一些用过的正则

2022 手机号校验正则

;/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
上次编辑于:
Copyright © 2018-present Mr.Chen