• JS10day(api 阶段性完结，正则表达式简介，过滤敏感词案例，注册模块验证案例)

    文章目录

    正则表达式

    不是第一次接触正则表达式了，看来它的应用还是挺广泛的，之前在爬虫就用到很多正则表达式。
    上菜鸟链接，有需求，cv它写好的https://c.runoob.com/front-end/854/

    先看看在JS中它的语法：

    1. 定义正则表达式语法：

    let 变量名=/表达式/

    • 1

    其中 / / 是正则表达式字面量（也就是说这个变量名是一个对象，可以通过.来调用方法）

    • 比如：
    let reg=/前端/

    • 1

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

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

    • 示例：
            let reg = /java/
        let str = '我们 不是和ewqjava'
        console.log(reg.test(str))   //true

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

    3.检索（查找）符合规则的字符串：

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

    • 示例：
            // 定义正则表达式   reg 里面存的是对象
        let reg = /前端/
        let str = '我们大家都在学前端'
        // 检索 exec()
        console.log(reg.exec(str))  // 返回的是数组

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

    元字符：

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

    1. 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
    2. 量词 （表示重复次数）
    3. 字符类 （比如 \d 表示 0~9）

    参考文档：

    1. 边界符：

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

    边界符说明
    ^表示匹配行首的文本（以谁开始）
    $表示匹配行尾的文本（以谁结束）

    如果 ^ 和 $ 在一起，表示必须是精确匹配。
    示例：

            console.log(/^哈$/.test('我开心的哈哈大笑'))  // false 
        console.log(/^哈$/.test('哈哈'))  // false 
        console.log(/^哈$/.test('哈'))  // true  精确匹配

    • 1
    • 2
    • 3

    2. 量词 （表示重复次数）

    在这里插入图片描述
    在这里插入图片描述

    3. 字符类：

    (1) [ ] 匹配字符集合 （单个的[ ]只匹配一个字符，想匹配多个要加上{n,m}）

    • 后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

    (2) [ ] 里面加上 - 连字符
    使用连字符 - 表示一个范围
    比如：
    [a-z] 表示 a 到 z 26个英文字母都可以
    [a-zA-Z] 表示大小写都可以
    [0-9] 表示 0~9 的数字都可以

    示例：

    腾讯QQ号：^[1-9][0-9]{4,}$   (腾讯QQ号从10000开始，[1-9]匹配开头数字，[0-9]{4,}匹配4位数及以上0~9的数字)

    • 1

    (3) [ ] 里面加上 ^ 取反符号

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

    (4) . 匹配除换行符之外的任何单个字符
    请添加图片描述
    (5) 预定义：指的是某些常见模式的简写方式。
    在这里插入图片描述

    日期格式：^\d{4}-\d{1,2}-\d{1,2}

    • 1

    4 修饰符

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

    /表达式/修饰符

    • 1

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

    console.log(/a/i.test('a'))  //true
console.log(/a/i.test('A'))  //true

    • 1
    • 2

    替换 replace 替换
    语法：

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

    • 1

    示例：

    console.log('蓝天a白云黑土a逮a虾户a'.replace(/a/g, ''))   //蓝天白云黑土逮虾户

    • 1

    过滤敏感词案例

    /^[\u4e00-\u9fa5]{2,8}$/        //unicode匹配2~8个中文

    • 1

    在这里插入图片描述
    在文本框中输入，按下Enter或者点击发布都能输出：body代码如下：

    
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <div></div>
    <script>
        let btn = document.querySelector('button')
        let textarea = document.querySelector('textarea')
        let div = document.querySelector('div')
        //监听点击事件
        btn.addEventListener('click', function () {
            // 过滤用户输入的内容
            div.innerHTML = textarea.value.replace(/激情|基情/g, '**')
            // div.innerHTML = textarea.value
        })
        //监听enter键按下事件
        textarea.addEventListener('keydown', function (e) {
            // 过滤用户输入的内容
            if (e.key == 'Enter') {
                div.innerHTML = textarea.value.replace(/激情|基情/g, '**')
            }
        })
    </script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    注册模块验证案例

  • 相关阅读:
    翻译软件在线翻译
    【赠书第6期】MATLAB科学计算从入门到精通
    【英语思考】How to think in English: Building Your English Brain
    hibernate ehcache.xml
    个人数学建模算法库之线性规划模型
    【SA8295P 源码分析 (一)】55 - ifs2_la.img 镜像加载解析过程分析
    Blender 插件
    openstack aarch64 arm64 kylin pip方式下载 nova 23.2.2 离线whl包
    C/C++内存管理相关知识点
    1103 Integer Factorization
  • 原文地址：https://blog.csdn.net/qq_44976531/article/details/125533697