JavaScript正则表达式的模式匹配教程,并且附带充足的实战代码(一)

简介: 其实我写这篇文章的话,主要是想自己重新复习一遍正则表达式。我们也知道正则表达式在很多语言中都是通用的,所以学好这个好处很多。接下来,就跟我一起来学习一下正则表达式,从0到入门吧。同时我会把文章分成多篇来讲解,欢迎大家持续订阅

正则表达式的定义


正则表达式(regular expression)是一个描述字符模式的对象,简单点来讲就是通过正则表达式规定的模式,从一堆字符串中,找到与该模式匹配的字符串,并可以完成检索或字符串替换的功能。


来举个例子,让大家更形象地理解正则表达式的作用。


你去买苹果,老板给你随便拿了几个,但你觉得他给你挑的苹果不好,于是你想从中拿掉一些不好的苹果,再去挑一些好的苹果,在选之前,你先想好自己挑选苹果的标准,比如苹果的纹路要多 、苹果要很红 、苹果不能太大等等,然后再根据你自己定的标准去这么多苹果里挑选到完全符合你标准的苹果放进自己的袋子里,或者是替换掉袋子里你觉得不好的苹果。


希望你们能对正则表达式有个初步的印象。


正则表达式的使用


在JavaScript中,正则表达式用RegExp对象表示,我们可以通过两种方式创建一个正则表达式对象:


  1. RegExp直接量


  1. new RegExp()


RegExp直接量


let pattern = /javascript/ 这样双正斜杠包裹一个匹配模式的写法就是RegExp直接量,这种方法其实是new RegExp()的一种能语法糖的写法。这一部分我们都用RegExp直接量的方法来讲解,在后面我们会介绍 new RegExp() 的用法


正则表达式初体验


接下来看一个例子,来初次体验一下正则表达式的使用


    //RegExp直接量 创建一个字符串的匹配标准let pattern = /javascript/           let str = "I love javascript"
    str.search(pattern)           //返回 7


    我来讲一下这段代码,首先我们通过两个正斜杠// 创建了一个正则表达式对象,然后将我们要匹配的字符串放到这两个斜杠中,我们例子中就是将javascript放到两个斜杠中,意思就是我们的匹配标准就是:要匹配到javascript这段字符串。然后我们调用了一个检索的方法search(),这个方法需要传入一个正则表达式对象为参数,根据这个参数去字符串中匹配相应的字符串,如果匹配到了,则返回第一个与之匹配的字符的索引值;若没匹配到,返回-1。例子中,变量str中有一段字符串为javascript,所以匹配成功,并返回javascript的开头字母的索引值,为7


    深入了解正则表达式


    刚才我们体验了一下最简单的正则表达式去匹配字符串。在上一个例子中,我们将javascript作为标准去匹配,其实大多数的字符都是按照字面含义去匹配的,意思就是你输入什么字符,就去匹配什么字符,比如/python/ 就是去字符串中匹配 python字符串 、/123/ 就是去匹配 123 字符串


    但是在正则表达式中,\ 反斜杠有特殊的作用,在一些字符前面加一个反斜杠,能起到转义的作用。例如 /n/ 是匹配字符串 n 的,但是/\n/中,n的前面加了一个反斜杠,就将其转义了,这个匹配模式的意思就是去匹配换行符,下面列出一些其他的转义字符


    字符
    匹配
    字母和数字字 自身
    \o NUL 字符(\u0000)
    \t 制表符(\u0009)
    \n 换行符(\u000A)
    \v 垂直制表符(\u000B)
    \f 换页符(\u000C)
    \r 回车符(\u000D)

    在正则表达式中,许多标点符号都具有特殊的含义,它们是:^ $ . * + ? = ! : | \ / ( ) [ ] { } ,当我们想要匹配这些字符时,也需要在它们前面加上反斜杠 \ ,例如


      /*--------------不对小括号进行转义----------------*/let pattern = /you(kimy)/let str = "I love you(kimy)"
      str.search(pattern)       //返回 -1  表示未匹配到相应字符
      /*--------------对小括号进行转义-----------------*/let pattern = /you\(kimy\)/let str = "I love you(kimy)"
      str.search(pattern)       //返回  7 表示匹配成功


      为什么这些标点字符需要进行特殊的转义呢?因为它们有别的用处,我们接下来会慢慢介绍他们的用处


      字符类


      将直接量字符单独放在方括号里就组成了一个字符类,一个字符类可以匹配它所包含的任意字符。例如/[abcd]/ 就是匹配到 abcd四个字符中的任意一个即为匹配成功。如果在方括号里最前面加上一个 ^ 符号,则表示为,只要匹配到一个不是方括号里的字符的字符串即为匹配成功,例如 /[^abc]/就是匹配到不是 abc 三个字符中的任意一个即为匹配成功。字符类还可以使用 - 来表示字符的一个范围,例如 /[a-zA-Z0-9]/表示匹配到任意一个大小写字母或者数字都为匹配成功。


      在正则表达式中,还给出了一些特殊字符的转义,我们来看下列的表格


      字符
      匹配
      […] 方括号内的任意一个字符
      [^…] 不在方括号内的任意一个字符
      . 除了换行符和其他Unicode行终止符之外的任意字符
      \w 相当于[a-zA-Z0-9]
      \W 相当于[^a-zA-Z0-9]
      \s 任何Unicode空白符
      \S 任何非Unicode空白符
      \d
      任何非Unicode空白符
      \D 任何非数字,相当于[^0-9]
      [\b] 退格直接量


      我们来选取表格中的 \d 来举个例子


        let pattern = /python\d/let str = "I love python3"
        str.search(pattern)   //返回  7


        我们设置的匹配模式是 /python\d/,表示匹配到一个字符串为python并且后面紧跟一个任意数字即可,所以成功匹配到 str 中的python3字符串


        结束语


        第一篇对于 JavaScript正则表达式的讲解就先到这里,明天后天会继续更新第二篇 、第三篇,并且我会在之后的文章上放上前几篇的文章链接,方便大家观看,希望大家持续关注,点个关注,不迷路

        相关文章
        |
        5月前
        |
        人工智能 自然语言处理 JavaScript
        通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
        通义灵码基于自然语言需求,快速生成完整Vue组件。例如,用Vue 2和JavaScript实现贪吃蛇游戏:包含键盘控制、得分系统、游戏结束判定与Canvas动态渲染。AI生成的代码符合规范,支持响应式数据与事件监听,还能进阶优化(如增加启停按钮、速度随分数提升)。传统需1小时的工作量,使用通义灵码仅10分钟完成,大幅提升开发效率。操作简单:安装插件、输入需求、运行项目即可实现功能。
        274 4
         通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
        |
        1月前
        |
        JavaScript 前端开发 安全
        【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
        本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
        |
        3月前
        |
        JavaScript 前端开发 算法
        流量分发代码实战|学会用JS控制用户访问路径
        流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
        103 1
        |
        4月前
        |
        机器学习/深度学习 JavaScript 前端开发
        JS进阶教程:递归函数原理与篇例解析
        通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
        185 19
        |
        12月前
        |
        自然语言处理 JavaScript 前端开发
        深入理解JavaScript中的闭包:原理与实战
        【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
        |
        7月前
        |
        资源调度 JavaScript 前端开发
        前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
        本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
        6342 24
        |
        7月前
        |
        监控 JavaScript 前端开发
        MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
        MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
        MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
        |
        监控 安全 中间件
        Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
        这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
        217 0
        Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
        |
        8月前
        |
        人工智能 算法 Ubuntu
        动态规划篇】正则表达式与通配符:开启代码匹配的赛博奇幻之旅
        动态规划篇】正则表达式与通配符:开启代码匹配的赛博奇幻之旅
        |
        中间件 API
        Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
        这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中,作者遇到了打包构建时的一系列报错,报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整,作者最终删除了lodash-es库,并将radash的部分源码复制到本地,解决了打包报错的问题。文章最后提供了项目的线上预览地址,并欢迎读者留言讨论更好的解决方案。
        244 0
        Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?