正则表达式

你想要那颗糖

已于 2023-04-03 12:06:56 修改

阅读量77

点赞数

分类专栏： JavaScript 文章标签：正则表达式

于 2023-04-03 12:04:20 首次发布

本文链接：https://blog.csdn.net/qq_50260510/article/details/129926301

版权

JavaScript 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

正则表达式（Regular Expression）是一种字符串匹配的模式（规则）

使用场景：

（1）例如验证表单：手机号表单要求用户只能输入11位的数字 ( 匹配 )

（2）过滤掉页面内容中的一些敏感词( 替换 )，或从字符串中获取我们想要的特定部分( 提取 )等

二、元字符

1.普通字符:

（1）大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。

（2）普通字符只能够匹配字符串中与它们相同的字符。

（3）比如，规定用户只能输入英文26个英文字母，普通字符的话 / [abcdefghijklmnopqrstuvwxyz] /

2.元字符(特殊字符）

（1）是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。

（2）比如，规定用户只能输入英文26个英文字母，换成元字符写法： / [a-z] /

2.2 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

2.3 量词

量词用来设定某个模式重复次数

2.常见量词的使用

（1）字符串 'p' 想要重复 3次以上怎么写？ /^p{3,}$/

（2）字符串 'p' 想要重复6~18次之间怎么写？ /^p{6,18}$/

（3）字符串 'p' 想要重复0次以上怎么写？ /^p*$/ 或者 /^p{0,}$/

（4）字符串 'p' 想要至少出现一次怎么写？ /^p+$/或者 /^p{1,}$/

2.3 范围

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用 [] 表示范围

2.4 字符类

某些常见模式的简写方式，区分字母和数字

三、元字符的替换和修饰符

3.1 元字符的替换

replace 替换方法，可以完成字符的替换

replace() 方法非常强大的地方在于, 第一个参数除了可以传字符串以外, 还可以传入正则表达式

案例分享：

<!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>元字符的替换</title>
</head>
<body>
  <script>
    // let str = '前端90期学的真牛逼!'
    // // replace() 方法
    // // 参数1: 要搜索的字符串
    // // 参数2: 替换成什么
    // // 返回值: 替换后的字符串
    // console.log(str.replace('牛逼', '**'))
    // console.log(str.replace('90', '**'))
    let str = '前端学科是一门有趣的学科, 大家来学习前端, 一定可以高薪就业, 做一个优秀前端工程师!!'
    // 只会替换第一个, 使用字符串来替换的弊端
    // console.log(str.replace('前端', 'web'))
    
    // replace() 方法非常强大的地方在于, 第一个参数除了可以传字符串以外, 还可以传入正则表达式
    // 正则后面可以添加一个修饰符 /前端/g
    // g: global 全局模式
    console.log(str.replace(/前端/g, 'web'))
  </script>
</body>
</html>

效果展示：

3.2 元字符的修饰

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

最后，推荐一个有关正则表达式的Vscode 插件

案例分享1：验证登陆

<!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>验证用户名案例</title>
    <style>
        dt,
        dd {
            margin: 0;
            position: relative;
        }

        dl {
            display: flex;
            width: 600px;
            height: 30px;
            line-height: 30px;
        }

        dl dt {
            margin-right: 5px;
        }

        dl input {
            width: 269px;
            height: 28px;
            padding-left: 5px;
            border: 1px solid #ccc;
            outline: none;
            background: transparent;
            line-height: 30px;
            border-radius: 5px;
        }

        .tip {
            display: none;
            position: relative;
            width: 220px;
            height: 30px;
            margin-left: 15px;
            border: 1px solid #f59fb1;
            color: #d93c3c;
            text-align: center;
            font-size: 14px;
            background-color: #fff2f5;
            border-radius: 5px;
        }

        .tip::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -6px;
            width: 10px;
            height: 10px;
            background-color: #fff2f5;
            border-left: 1px solid #f59fb1;
            border-bottom: 1px solid #f59fb1;
            transform: translateY(-50%) rotate(45deg);
        }

        span {
            position: absolute;
            top: 9px;
            right: 10px;
            width: 15px;
            height: 15px;
        }

        .right {
            background: url(./images/right.png) no-repeat;
        }

        .wrong {
            background: url(./images/error1.png) no-repeat;
        }
    </style>
</head>

<body>
    <dl>
        <dt>用户名:</dt>
        <dd><input type="text" class="uname"><span></span></dd>
        <dd class="tip">输入6~16位数字字母-_组成</dd>
    </dl>
    <script>
        // 用户名正则：
        const reg = /^[a-z0-9A-Z-_]{6,16}$/
        const uname = document.querySelector('.uname')
        const tip=document.querySelector('.tip')
        const span = uname.nextElementSibling
        uname.addEventListener('blur' , function(){
            // console.log('我要开始校验啦');
            if(reg.test(uname.value)){
                span.className = 'right'
                tip.style.display = 'none'
            }else{
                span.className = 'wrong'
                tip.style.display = 'block'
            }
        })

    </script>
</body>

</html>

效果展示：

案例分享2：隐藏中奖手机号中间四位数

<!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>隐藏手机号中间四位案例.</title>
  <style>
    .wrapper {
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }

    .wrapper strong {
      font-size: 50px;
    }

    .wrapper span {
      color: #b10e0d;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <strong>年会抽奖</strong>
    <h1>获奖手机号：<span class="phone">???</span></h1>
  </div>

  <script>
    let phone = '13838383388'
    // 需求: 隐藏中间四位手机号
    // 可用于分组替换
    const reg = /^(\d{3})\d{4}(\d{4})$/
    // console.log(phone.replace(reg, '$1****$2'))
    document.querySelector('.phone').innerHTML = phone.replace(reg, `${'*'.repeat(7)}$2`)

    // console.log('*'.repeat(7))
  </script>
</body>

</html>

效果展示：