10-正则表达式

蜂蜜橘子
124 阅读2分钟

正则表达式

什么是正则表达式

  • 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
  • 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

image-20221207180644562

  • 请在上图中找出【戴帽子和眼镜的男人】

  • 戴帽子、戴眼镜、男人都是描述信息，通过这些信息能够在人群中查找到确定的某个人，那么这些用于查找的描述信息编 写一个模式，对应到计算机中就是所谓的正则表达式。

  • 正则表达式在 JavaScript中的使用场景：

    • 例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)
    • 比如用户名: /^[a-z0-9_-]{3,16}$/
    • 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。
    • image-20221207181102040

1.正则表达式是什么？

是用于匹配字符串中字符组合的模式

2.正则表达式有什么作用？

表单验证（匹配）

过滤敏感词（替换）

字符串中提取我们想要的部分（提取）

语法

  • 我们想要查找是否有戴眼镜的人, 怎么做呢？

    • 定义规则： 戴眼镜的
    • 根据规则去查找：找到则返回

  • 正则同样道理，我们分为两步：

    • 定义规则

    • 查找

    • 比如：查找下面文本中是否包含字符串 '火

    • let str = '红红火火恍恍惚惚'

  • JavaScript 中定义正则表达式的语法有两种：

    • ①定义正则表达式语法：

      • let 变量名 = /表达式/

      • 其中 / / 是正则表达式字面量 里面存的是对象

      • 比如：

      • let reg = /前端/

    • 判断是否有符合规则的字符串：

      • test() 方法 用来查看正则表达式与指定的字符串是否匹配

      • 语法：

        regObj.test(被检测的字符串)

      • 比如：

        let str = '前端红红火火恍恍惚惚'
//定义正则表达式
let reg = /前端/
//检测是否匹配
let re = reg.test(str)
console.log(re)  //true

      • 如果正则表达式与指定的字符串匹配 ，返回true，否则false

    • ②检索（查找）符合规则的字符串：

      • exec() 方法 在一个指定字符串中执行一个搜索匹配

      • 语法：

        regObj.exec(被检测的字符串)

      • 比如：

        let str = '前端红红火火恍恍惚惚'
let reg = /前端/
let re = reg.exec(str)
console.log(re)  //返回的是个数组

      • 如果匹配成功，exec() 方法返回一个数组，否则返回null

元字符

  • 普通字符:

    • 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
    • 也就是说普通字符只能够匹配字符串中与它们相同的字符。

  • 元字符(特殊字符）

    • 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
    • 比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..
    • 但是换成元字符写法： [a-z]

  • 参考文档：

  • 为了方便记忆和学习，我们对众多的元字符进行了分类：

    • 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

      • 正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
      • ^：表示匹配首行的文本（以谁开始）
      • $：表示匹配行尾的文本（以谁结束）
      • 如果 ^ 和 $ 在一起，表示必须是精确匹配。
      • image-20221207204325625

    • 量词 （表示重复次数）

      • 量词用来 设定某个模式出现的次数

      • 量词说明
        *重复零次或更多次
        +重复一次或更多次
        ？重复零次或一次
        {n}重复n次
        {n,}重复n次或更多次
        {n,m}重复n到m次

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

      • 注意：量词只针对量词前面一位字符 例如：456?（6可以重复零次或一次）

      • image-20221207214621614

      • image-20221207214640662

      • image-20221207214653810

      • image-20221207214713046

    • 字符类 （比如 \d 表示 0~9）

      （1）[ ] 里面加上 - 连字符

      • 使用连字符 - 表示一个范围

      • //26个英文字母选其中的一个
console.log(/^[a-z]$/.test('c'))   //true

      • 比如：

      • [a-z] 表示 a 到 z 26个英文字母都可以

      • [a-zA-Z] 表示大小写都可以

      • [0-9] 表示 0~9 的数字都可以

      （2） [ ] 里面加上 ^ 取反符号

      • 比如：
      • [^a-z] 匹配除了小写字母以外的字符
      • 注意要写到中括号里面

      （3）. 匹配除换行符之外的任何单个字符

      （4）预定义：指的是某些常见模式的简写方式。

      • 预定类说明
        \d匹配0-9之间的任一数字，相当于[0-9]
        \D匹配所有0-9以外的字符，相当于[^0-9]
        \w匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]
        \W除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]
        \s匹配空格（包括换行符、制表符、空格等），相当于[\t\r\n\v\f]
        \S匹配非空格的字符，相当于[^\t\r\n\v\f]
      • 日期格式
^\d{4}-\d{1,2}-\d{1,2}

      • 更多正则表达式c.runoob.com/front-end/8…

修饰符

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

语法：

/表达式/修饰符
  • i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
  • g 是单词 global 的缩写，匹配所有满足正则表达式的结果

替换 replace 替换

语法：

字符串.replace(/正则表达式/,'替换的文本')

案例

用户名验证案例

用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位

<!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>Document</title>
    <style>
        .zq {
            color: green;
        }
        .cw {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <span></span>
    <script>
        let input = document.querySelector('input')
        let spans = document.querySelector('span')
        input.addEventListener('blur',function(){
            if (/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)){
                spans.className = 'zq'
                spans.innerHTML = '输入正确'
            } else {
                spans.className = 'cw'
                spans.innerHTML = '请输入6-16位字符'
            }
        })
    </script>
</body>
</html>

输入错误

image-20221207232410544

输入正确

image-20221207232431078

过滤敏感词

要求用户不能输入敏感字

<!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>Document</title>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>提交</button>
    <div></div>
    <script>
        let textarea = document.querySelector('textarea')
        let button = document.querySelector('button')
        let div = document.querySelector('div')
        button.addEventListener('click',function(){
            div.innerHTML = textarea.value.replace(/激情|基情/g,'**')
        })
    </script>
</body>
</html>

chrome_RTRhY2cglX.png

avatar
文章
阅读
粉丝