JS中正则表达式的运用

正则表达式

@jarringslee

文章目录

js 复制代码
//6-16位字母数字下划线
/^[a-zA-Z0-9_-]{6,16}$/
// 手机号验证(11 位)
/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
// 6 位数字验证码
/^\d{6}$/
// 密码:6--20 位,仅字母、数字、下划线或短横线
/^[a-zA-Z0-9_-]{6,20}$/

语法与基本使用

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

使用场景:

  • 例如验证表单:手机号表单要求用户只能输入11位的数字 (匹配)
  • 过滤掉页面内容中的一些敏感词(替换 ),或从字符串中获取我们想要的特定部分(提取)等
  1. 使用正则

    • exec()方法 用来在字符串中执行正则搜索并返回第一个匹配结果的信息
    • 如果匹配成功,返回一个数组(含下标、分组等);如果失败,返回 null
html 复制代码
<body>
  <script>
    // 正则表达式的 exec 使用
    const str = 'web前端开发'
    // 1. 定义规则
    const reg = /web/

    // 2. 使用正则  exec()
    console.log(reg.exec(str))
    // 结果:["web", index: 0, input: "web前端开发", groups: undefined]

    console.log(reg.exec('java开发'))
    // 结果:null
  </script>
</body>
  • exec()方法 用来在字符串中执行正则搜索并返回第一个匹配结果的信息
  • 如果匹配成功,返回一个数组(含下标、分组等);如果失败,返回 null
html 复制代码
<body>
  <script>
    // 正则表达式的 exec 使用
    const str = 'web前端开发'
    // 1. 定义规则
    const reg = /web/

    // 2. 使用正则  exec()
    console.log(reg.exec(str))
    // 结果:["web", index: 0, input: "web前端开发", groups: undefined]

    console.log(reg.exec('java开发'))
    // 结果:null
  </script>
</body>

用for循环遍历检查数组:

for 循环或 some 一行就能搞定:

js 复制代码
// 待检查数组
const arr = ['apple', 'banana', 'cat'];

// 要检查的子串
const key = 'a';

// 方法1:for 循环
for (let i = 0; i < arr.length; i++) {
  if (arr[i].includes(key)) {
    console.log(`第${i}项 "${arr[i]}" 包含 "${key}"`);
  }
}

// 方法2:一行 some
const has = arr.some(str => str.includes(key));
console.log('数组里至少有一项包含:', has);
  • includes() 判断字符串是否包含子串。
  • some() 只要有一项满足就返回 true;全部不满足返回 false

元字符

  1. 普通字符:
  • 大多数的字符仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字。
  • 普通字符只能够匹配字符串中与它们相同的字符。
  • 比如,规定用户只能输入英文26个英文字母,普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/
  1. 元字符(特殊字符)
  • 是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。
  • 比如,规定用户只能输入英文26个英文字母,换成元字符写法: /[a-z]/

边界符

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

  • ^ 表示匹配行首的文本(从谁开始)
  • $ 表示匹配行尾的文本(从谁结束)

如果 ^ 和 $ 在一起,表示必须是精确匹配

html 复制代码
<body>
  <script>
    // 元字符之边界符
    // 1. 匹配开头的位置 ^
    const reg = /^web/
    console.log(reg.test('web前端'))  // true
    console.log(reg.test('前端web'))  // false
    console.log(reg.test('前端web学习'))  // false
    console.log(reg.test('we'))  // false

    // 2. 匹配结束的位置 $
    const reg1 = /web$/
    console.log(reg1.test('web前端'))  //  false
    console.log(reg1.test('前端web'))  // true
    console.log(reg1.test('前端web学习'))  // false
    console.log(reg1.test('we'))  // false  

    // 3. 精确匹配 ^ $
    const reg2 = /^web$/
    console.log(reg2.test('web前端'))  //  false
    console.log(reg2.test('前端web'))  // false
    console.log(reg2.test('前端web学习'))  // false
    console.log(reg2.test('we'))  // false 
    console.log(reg2.test('web'))  // true
    console.log(reg2.test('webweb'))  // flase 
  </script>
</body>

量词

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

注意: 逗号左右两侧千万不要出现空格

html 复制代码
<body>
  <script>
    // 元字符之量词
    // 1. * 重复次数 >= 0 次
    const reg1 = /^w*$/
    console.log(reg1.test(''))  // true
    console.log(reg1.test('w'))  // true
    console.log(reg1.test('ww'))  // true
    console.log('-----------------------')

    // 2. + 重复次数 >= 1 次
    const reg2 = /^w+$/
    console.log(reg2.test(''))  // false
    console.log(reg2.test('w'))  // true
    console.log(reg2.test('ww'))  // true
    console.log('-----------------------')

    // 3. ? 重复次数  0 || 1 
    const reg3 = /^w?$/
    console.log(reg3.test(''))  // true
    console.log(reg3.test('w'))  // true
    console.log(reg3.test('ww'))  // false
    console.log('-----------------------')


    // 4. {n} 重复 n 次
    const reg4 = /^w{3}$/
    console.log(reg4.test(''))  // false
    console.log(reg4.test('w'))  // flase
    console.log(reg4.test('ww'))  // false
    console.log(reg4.test('www'))  // true
    console.log(reg4.test('wwww'))  // false
    console.log('-----------------------')

    // 5. {n,} 重复次数 >= n 
    const reg5 = /^w{2,}$/
    console.log(reg5.test(''))  // false
    console.log(reg5.test('w'))  // false
    console.log(reg5.test('ww'))  // true
    console.log(reg5.test('www'))  // true
    console.log('-----------------------')

    // 6. {n,m}   n =< 重复次数 <= m
    const reg6 = /^w{2,4}$/
    console.log(reg6.test('w'))  // false
    console.log(reg6.test('ww'))  // true
    console.log(reg6.test('www'))  // true
    console.log(reg6.test('wwww'))  // true
    console.log(reg6.test('wwwww'))  // false

    // 7. 注意事项: 逗号两侧千万不要加空格否则会匹配失败

  </script>

范围

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

html 复制代码
<body>
  <script>
    // 元字符之范围  []  
    // 1. [abc] 匹配包含的单个字符, 多选1
    const reg1 = /^[abc]$/
    console.log(reg1.test('a'))  // true
    console.log(reg1.test('b'))  // true
    console.log(reg1.test('c'))  // true
    console.log(reg1.test('d'))  // false
    console.log(reg1.test('ab'))  // false

    // 2. [a-z] 连字符 单个
    const reg2 = /^[a-z]$/
    console.log(reg2.test('a'))  // true
    console.log(reg2.test('p'))  // true
    console.log(reg2.test('0'))  // false
    console.log(reg2.test('A'))  // false
    // 想要包含小写字母,大写字母 ,数字
    const reg3 = /^[a-zA-Z0-9]$/
    console.log(reg3.test('B'))  // true
    console.log(reg3.test('b'))  // true
    console.log(reg3.test(9))  // true
    console.log(reg3.test(','))  // flase

    // 用户名可以输入英文字母,数字,可以加下划线,要求 6~16位
    const reg4 = /^[a-zA-Z0-9_]{6,16}$/
    console.log(reg4.test('abcd1'))  // false 
    console.log(reg4.test('abcd12'))  // true
    console.log(reg4.test('ABcd12'))  // true
    console.log(reg4.test('ABcd12_'))  // true

    // 3. [^a-z] 取反符
    const reg5 = /^[^a-z]$/
    console.log(reg5.test('a'))  // false 
    console.log(reg5.test('A'))  // true
    console.log(reg5.test(8))  // true

  </script>
</body>

字符类

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

  • 字符类

    • 语法:/[abc]/
    • 含义:只要待测字符串包含 abc 中任意一个字符,即返回 true

    示例:

    js 复制代码
    //只能出现一个元素且只能出现一次
    /[abc]/.test('andy'); // true  
    /[abc]/.test('baby'); // true  
    /[abc]/.test('cry');  // true  
    /[abc]/.test('die');  // false  
    
    //任意字符必须出现n次   /[abc]{n}/
    /[abc]{2}/.test('andy'); // false
    /[abc]{2}/.test('abef'); // true
  • 连字符类

    • 语法:[起始-结束]
    • 含义:匹配 起始到结束 之间的任意一个 字符。
      • [a-z] → 26 个小写字母
      • [a-zA-Z] → 大小写字母
      • [0-9] → 0~9 任一数字

    示例:

    js 复制代码
    /^[a-z]$/.test('c'); // true

    应用示例:

    • 腾讯 QQ 号(≥10000)
    js 复制代码
    /^[1-9][0-9]{4,}$/   // 首字符 1-9,后面位字符 0-9,后面至少 4 位数字(整体至少五位)
    js 复制代码
    // 字符类
    console.log(/^[A-Z]$/.test('p'));                // false
    console.log(/^[A-Z]$/.test('P'));                // true
    console.log(/^[0-9]$/.test(2));                  // true
    console.log(/^[a-zA-Z0-9]$/.test(2));            // true
    console.log(/^[a-zA-Z0-9]$/.test('p'));          // true
    console.log(/^[a-zA-Z0-9]$/.test('p'));          // true
  • 在 [ ] 里面加上 ^ 取反符号

    • \^a-z\] 匹配除了小写字母以外的字符

  • 小点点 .

    • 匹配除了换行符以外的任何单个字符

用户名验证案例

需求

用户名只能由英文字母、数字、下划线或短横线组成,且长度 6~16 位。

实现步骤

  1. 正则表达式 /^[a-zA-Z0-9_-]{6,16}$/

  2. 验证时机

    表单失去焦点时立即验证。

  3. 结果反馈

    • 符合规范 → 给后面的 <span> 添加 right
    • 不符合规范 → 给后面的 <span> 添加 wrong
html 复制代码
<head>
    <style>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }

        .error {
            color: red;
            background: url(./images/error1.png) no-repeat left center;
        }

        .right {
            color: green;
            background: url(./images/right.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <input type="text">

    <span></span>
    <script>
        const reg = /^[a-zA-Z0-9_-]{6,16}$/
        const input = document.querySelector('input')
        const span = input.nextElementSibling
        input.addEventListener('blur', function () {
	    //input的下一个元素
            if (reg.test(this.value)) {
                span.innerHTML = '输入正确'
                span.className = 'right'
            } else {
                span.innerHTML = '请输入6~16位的英文 / 数字 / 下划线!'
                span.className = 'error'
            }
        })
    </script>
</body>
  • 预定义 指的是某些常见模式的简写方式

    • \d 匹配任意 0--9 数字,等价于 [0-9]
    • \D 匹配任意非数字字符,等价于 [^0-9]
    • \w 匹配字母、数字或下划线,等价于 [A-Za-z0-9_]
    • \W 匹配除字母、数字、下划线外的任意字符,等价于 [^A-Za-z0-9_]
    • \s 匹配任意空白符(空格、Tab、换行等),等价于 [ \t\r\n\v\f]
    • \S 匹配任意非空白符,等价于 [^ \t\r\n\v\f]

    日期格式示例: ^\d{4}-\d{1,2}-\d{1,2}

  • 修饰符

    • 约束正则执行的某些细节行为
    • 语法:/表达式/修饰符
      • i(ignore):匹配时不区分大小写
      • g(global):查找全部满足正则表达式的匹配结果

    示例:

    js 复制代码
    console.log(/a/i.test('a')); // true
    console.log(/a/i.test('A')); // true

    修饰符应用:替换全局

    html 复制代码
    <body>
      <script>
        console.log(/^java$/.test('java'))
        console.log(/^java$/i.test('JAVA'))
        console.log(/^java$/i.test('Java'))
        const str = 'java是一门编程语言, 学完JAVA工资很高'
        // const re = str.replace(/java|JAVA/g, '前端')
        const re = str.replace(/java/ig, '前端')
        console.log(re)  // 前端是一门编程语言, 学完前端工资很高
      </script>
    </body>

    过滤敏感词小实例:

    输入:你很有激情

    点击后变成:你很有**

    html 复制代码
    <body>
      <textarea name="" id="" cols="30" rows="10"></textarea>
      <button>发布</button>
      <div></div>
      <script>
        const tx = document.querySelector('textarea')
        const btn = document.querySelector('button')
        const div = document.querySelector('div')
        btn.addEventListener('click', function () {
          // console.log(tx.value)
          div.innerHTML = tx.value.replace(/激情|基情/g, '**')
          tx.value = ''
        })
      </script>
    </body>
相关推荐
雷达学弱狗2 小时前
正则表达式,字符串的搜索与替换
正则表达式
ComputerInBook2 小时前
C++编程语言:标准库:第37章——正则表达式(Bjarne Stroustrup)
开发语言·c++·正则表达式
雷达学弱狗2 小时前
正则表达式与转义符的区别。注意输入的东西经过了一次转义,一次正则表达式。\\转义是单斜杠\\在正则表达式也是单斜杠所以\\\\经过两道门才是字符单斜杠
正则表达式
芭拉拉小魔仙3 小时前
【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
javascript·typescript·企业微信
JosieBook3 小时前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛4 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端4 小时前
claude code 原理分析
前端
GalaxyMeteor4 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man4 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试