2025第1周 | JavaScript中的正则表达式

目录

  • 1. 正则表达式是个什么东东?
    • 1.1 怎么定义正则
    • 1.2 对象字面量方式
    • 1.3 类创建方式
  • 2. 怎么使用
    • 2.1 实例方法
      • 2.1.1 exec方法
      • 2.1.2 test方法
    • 2.2 字符串中的方法
      • 2.2.1 match/matchAll
      • 2.2.2 replace/replaceAll
      • 2.2.3 split
      • 2.2.4 search
  • 3. 规则
    • 3.1 修饰符
    • 3.2 字符类
    • 3.3 锚点(Anchors)
    • 3.4 转义字符串
    • 3.5 集合(Sets)和范围(Ranges)
    • 3.6 量词
    • 3.7 捕获组
    • 3.8 贪婪模式和惰性模式

2025,做想做的事,读想读的书,持续学习,自律生活,修行人生。

2025一个转身就已到来,对于时间太快,总会有种惶恐感。每每回首过去,总会发现想要做的事情没有完成,学习的内容少之又少,读的有用的书籍更是可以忽略不计。对于内在的超越,内在的修行也是没有始终践行,知行合一,实践、认识、再实践、再认识…

2025年第1周:2025.01.01 ~ 2025.01.05

目标:JavaScript中的正则表达式,您搞懂了么?这部分内容,不需要深入了了解,但是基本的概念和用法需要掌握。

  • 正则表达式是个什么东东?
  • 怎么使用?
  • 规则有哪些

1. 正则表达式是个什么东东?

我们看一下百度百科上的解释:

正则表达式(Regular Expression):又称规则表达式,在代码中常简写为regexregexpRE 。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式(规则)的文本。许多程序设计语言都支持利用正则表达式进行字符串操作。

读了半天,还是懵,说的什么东东?

其实就一句话:在JavaScript中,就是用来进行字符串匹配的,进行搜索、获取、替代字符串

1.1 怎么定义正则

那么,怎么定义正则呢?有两种方式来定义正则:

  1. 对象字面量方式(常用)
  2. 使用类RegExp创建

正则有两部分构成:模式、和修饰符。

1.2 对象字面量方式

  • 这里面xxx:为模式
  • ig:为修饰符
// 对象字面量方式创建正则
const regexp = /xxx/ig

1.3 类创建方式

  • 使用RegExp 类来创建
const regexp = new RegExp("xxx", "ig")

2. 怎么使用

有了正则表达式之后,我们要如何使用它呢? 在JavaScript中,主要用于以下两个场景:

  1. RegExp的实例方法:exec、和 test 方法
  2. 字符串的方法:match/matchAllreplace/replaceAllsearchsplit 方法。

2.1 实例方法

2.1.1 exec方法

  • exec方法:使用正则,执行一个字符串。
const re1 = /qtz/ig; 
const message = "welcom to qtz";const result = re1.exec(message);
console.log(result);// [ 'qtz', index: 10, input: 'welcom to qtz', groups: undefined ]

2.1.2 test方法

test方法:检测某一个字符串是否符合正则的规则。返回boolean类型。

const regexp = /qtz/ig
const str = "welcome to qtz"
if (regexp.test(str)) {console.log("匹配到了qtz")
}

2.2 字符串中的方法

2.2.1 match/matchAll

  • 注意:matchAll传入的正则修饰符,必须加g,否则会报如下错误:
Uncaught TypeError: String.prototype.matchAll called with a non-global RegExp argument
  • matchAll 返回值:得到是一个迭代器对象(RegExpStringIterator{})
const re = /qtz/ig; 
const message = "Qtz and qtz or qtz";const result = message.matchAll(re);console.log(result.next()); 
console.log(result.next());
console.log(result.next());

2.2.2 replace/replaceAll

  • 替换字符串
const re1 = /qtz/ig; 
const message = "Qtz and qtz or qtz";const result = message.replace(re1, "AAA");
console.log(result);    // AAA and AAA or AAA

2.2.3 split

  • 字符串分割
const reg = /qtz/ig; 
const message = "Qtz and qtz or qtz";const result = message.split(reg);
console.log(result);   // [ '', ' and ', ' or ', '' ]

2.2.4 search

  • 查找字符串
const reg = /qtz/i; 
const message = "HH Qtz and qtz or qtz";const result = message.search(reg);
console.log(result);  // 3

3. 规则

3.1 修饰符

  • g:全局,匹配所有
  • i:忽略大小写
  • m:多行匹配

3.2 字符类

字符类(Character classes)是一个特殊的符号,匹配特定集中的任何符号:

  • \d :数字从0到9的字符
  • \s:空格符号,包括空格、制表符 \t、换行符\n 和其他少数稀有字符,例如 \v\f\r
  • \w:'单字"字符,拉丁字母、数字、下划线-。相当于 [ a-zA-Z0-9_ ]
  • .(点):点 . 是一种特殊字符类,它与“除换行符之外的任何字符”匹配.

反向类(Inverse classes)

  • \D 非数字:除 \d 以外的任何字符,例如字母,
  • \S 非空格符号:除\s 以外的任何字符,例如字母。
  • \W 非单字字符:除 \w 以外的任何字符,例如非拉丁字母或空格,

3.3 锚点(Anchors)

符号^和符号 $ 在正则表达式中具有特殊的意义,它们被称为“锚点”。

  • 符号 ^ 匹配文本开头;
  • 符号 $ 匹配文本末尾,

词边界(Word boundary)

  • 词边界 \b 是一种检査,就像 ^$ 一样,它会检査字符串中的位置是否是词边界。
  • 词边界测试 \b 检査位置的一侧是否匹配 \w,而另一侧则不匹配“\w“

3.4 转义字符串

如果要把特殊字符作为常规字符来使用,需要对其进行转义

  • 只需要在它前面加个反斜杠 \

常见的需要转义的字符:

[ ] \ ^ $ . | ? * + ( )
  • 斜杠符号 / 并不是一个特殊符号,但是在字面量正则表达式中也需要转义;
const re = /\//

3.5 集合(Sets)和范围(Ranges)

有时候我们只要选择多个匹配字符其中之一就可以:

  • 在方括号 [...] 中的几个字符或者字符类意味着“搜索给定的字符中的任意一个”.

集合(Sets)

  • 比如说,[eao] 意味着查找在3个字符’a’、'e’或者、'o’中的任意一个;

范围(Ranges):方括号也可以包含字符范围

  • 比如说,[a-z]会匹配从 a到z范围内的字母,[0-5]表示从05的数字;
  • [0-9A-F]表示两个范围:它搜索一个字符,满足数字 0 到 9 或字母 A 到 F
  • \d :和 [0-9]相同;
  • \w:和 [a-zA-Z0-9_]相同;

3.6 量词

用来形容我们所需要的数量的词被称为量词(quantifiers)。

数量 {n}

  • 确切的位数:{5}
  • 某个范围的位数:{3,5} 注意,号后面不能有空格

简写:

  • +:代表“一个或多个”,相当于{1,}
  • ?:代表“零个或一个”,相当于(0,1}。换句话说,它使得符号变得可选;
  • *:代表着“零个或多个”,相当于{0,}。也就是说,这个字符可以多次出现或不出现;

3.7 捕获组

  1. 模式的一部分可以用括号括起来(.),这称为“捕获组。这有两个作用:
  • 它允许将匹配的一部分作为结果数组中的单独项,
  • 它将括号视为一个整体;
  1. 命名组:
  • 用数字索引记录组很困难。
  • 对于更复杂的模式,计算括号很不方便。我们有一个更好的选择:给括号起个名字。
  • 这是通过在开始括号之后立即放置?<name>来完成的。
  1. 非捕获组:
  • 有时我们需要括号才能正确应用量词,但我们不希望它们的内容出现在结果中
  • 可以通过在开头添加 ?:来排除组。
  • 在正则表达式中,它用竖线|表示,
  • 通常会和捕获组一起来使用,在其中表示多个值
  • [aeo]的区别:中括号是单个字符

3.8 贪婪模式和惰性模式

默认情况下的匹配规则:是查找到匹配的内容后,会继续向后查找,一直找到最后一个匹配的内容

  • 这种匹配的方式,我们称之为贪婪模式

懒性模式中的量词与贪婪模式中的是相反的。

  • 只要获取到对应的内容后,就不再继续向后匹配
  • 我们可以在量词后面再加一个问号?来启用它
  • 所以匹配模式变为 *?+?,甚至将?变为 ??

END !

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/503088.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

导出中心设计

业务背景 应用业务经常需要导出数据&#xff0c;但是并发的导出以及不合理的导出参数常常导致应用服务的内存溢出、其他依赖应用的崩溃、导出失败&#xff1b;因此才有导出中心的设计 设计思想 将导出应用所需的内存转移至导出中心&#xff0c;将导出的条数加以限制&#xf…

Unity 中计算射线和平面相交距离的原理

有此方法 能够计算射线和平面是否相交以及射线起点到平面交点的距离 代码分析 var dot Vector3.Dot(ray.direction, plane.normal);计算射线和平面法线的点积&#xff0c;如果大于等于0&#xff0c;则说明射线和平面没有相交&#xff0c;否则&#xff0c;说明射线和平面相交…

网络安全抓包

#知识点&#xff1a; 1、抓包技术应用意义 //有些应用或者目标是看不到的&#xff0c;这时候就要进行抓包 2、抓包技术应用对象 //app,小程序 3、抓包技术应用协议 //http&#xff0c;socket 4、抓包技术应用支持 5、封包技术应用意义 总结点&#xff1a;学会不同对象采用…

数学建模入门——描述性统计分析

摘要&#xff1a;本篇博客主要讲解了数学建模入门的描述性统计分析&#xff0c;包括基本统计量的计算、数据的分布形态、数据可视化和相关性分析。 往期回顾&#xff1a; 数学建模入门——建模流程-CSDN博客 数学建模入门——数据预处理&#xff08;全&#xff09;-CSDN博客 …

遗传学的“正反”之道:探寻生命密码的两把钥匙

正向遗传学 & 反向遗传学 在生活中&#xff0c;我们常常会惊叹于孩子与父母外貌、性格上的相似之处&#xff0c;或是疑惑于某些家族遗传病为何代代相传。其实&#xff0c;这些现象背后都隐藏着遗传学的奥秘。遗传学&#xff0c;作为一门探索生物遗传与变异规律的学科&#…

点击主图,触发的是查看产品详情的逻辑

文章目录 1、点击主图&#xff0c;触发的是查看产品详情的逻辑2、点击主图&#xff0c;发送的请求是 productDetail 这个方法3、与主图相关的代码片段 1、点击主图&#xff0c;触发的是查看产品详情的逻辑 点击主图的确不会触发那些物流参数输入框的自动查询。 那些输入框需要…

图数据库 | 17、高可用分布式设计(上)

我们在前面的文章中&#xff0c;探索了多种可能的系统扩展方式&#xff0c;以及每种扩展方式的优劣。 本篇文章将通过具体的架构设计方案来对每一种方案的设计、投入产出比、各项指标与功能&#xff0c;以及孰优孰劣等进行评价。 在设计高性能、高可用图数据库的时候&#xf…

【FlutterDart】 listView.builder例子二(14 /100)

上效果图 上代码&#xff1a; import package:flutter/material.dart;class ListRoles extends StatelessWidget {ListRoles({super.key});final List<String> entries <String>[, -, *, /];final List<int> colorCodes <int>[600, 500, 100, 50];o…

深入了解 ES6 Map:用法与实践

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

DeepSeek重新定义“Open“AI

“面对颠覆性技术&#xff0c;闭源所创造的护城河是暂时的。即使是OpenAI的闭源方法也无法阻止他人赶超。” ——梁文锋&#xff0c;DeepSeek CEO DeepSeek V3 是一个拥有6710亿参数的开源AI模型&#xff0c;正在提升AI效率的新标准。它在相对有限的预算下进行训练&#xff0c…

5. CSS引入方式

5.1 CSS的三种样式 按照 CSS 样式书写的位置(或者引入的方式)&#xff0c;CSS样式表可以分为三大类&#xff1a; 1.行内样式表&#xff08;行内式&#xff09; 2.内部样式表&#xff08;嵌入式&#xff09; 3. 外部样式表&#xff08;链接式&#xff09; 5.2 内部样式表 …

开源平台Kubernetes的优势是什么?

Kubernetes 是一个可移植、可扩展的开源平台&#xff0c;用于管理容器化的工作负载和服务&#xff0c;方便进行声明式配置和自动化。Kubernetes 拥有一个庞大且快速增长的生态系统&#xff0c;其服务、支持和工具的使用范围广泛。 Kubernetes 这个名字源于希腊语&#xff0c;意…

web系统漏洞攻击靶场

摘 要 互联网极速发展的同时&#xff0c;也会带来一些安全性的风险&#xff0c;一些不为人知的安全问题也逐渐暴露出来。近年来&#xff0c;媒体不断披露了许多网络安全事故&#xff0c;许多网络应用程序被黑客攻击&#xff0c;导致内部数据外泄&#xff0c;人们开始认识到网络…

QPainter,QPen,QBrush详解

QPainter:画家 QPen:画笔&#xff0c;控制图形的边框轮廓 QBrush:画刷&#xff0c;控制图形的填充颜色样式 下面是用用QGraphicsItem来重写paint事件举例 #include <QGraphicsItem> #include <QPainter> #include <QGraphicsScene> #include <QGraphicsV…

C语言 扫雷程序设计

目录 1.main函数 2.菜单打印menu函数 3.游戏game函数 4.宏定义 5.界面初始化 6.打印界面 7.设置雷 8.统计排查坐标周围雷的个数 9.排查雷 10.总代码 test.c代码 game.h代码 game.c代码 结语&#xff1a; 一个简单的扫雷游戏&#xff0c;通过宏定义可以修改行列的…

第30天:Web开发-PHP应用组件框架前端模版渲染三方插件富文本编辑器CVE审计

#知识点 1、安全开发-原生PHP-开发组件集合 2、安全开发-原生PHP-模版引擎渲染 3、安全开发-原生PHP-第三方编辑器 组件/框架 说明 [Web框架] Laravel 现代化、功能全面的框架&#xff0c;适合大多数Web应用。 Symfony 高度模块化、功能强大的框架&#xff0c;适合复杂…

解决ESP32 wifi scan:1. 获取WIFI扫描列表个数为0 的问题 2.扫描WIFI列表时导致程序崩溃问题。

1. 获取WIFI扫描列表个数为0 的问题 参考ESP32的wifi scan例子&#xff0c;出问题的程序源码&#xff1a; 分析原因&#xff1a; 查看esp_wifi.c的源码&#xff0c;我们会发现&#xff1a; 上面意思就是但调用esp_wifi_scan_get_ap_records获取AP列表后&#xff0c;将会…

【动态重建】时间高斯分层的长体积视频

标题&#xff1a;Representing Long Volumetric Video with Temporal Gaussian Hierarchy 来源&#xff1a;浙江大学 链接&#xff1a;https://zju3dv.github.io/longvolcap/ 文章目录 摘要一、前言二、主要方法2.1 时间高斯分层2.2 高效渲染2.3 层次结构更新2.4 紧凑的外观模型…

mongodb==安装prisma连接

官网下载mongodb,解压安装 Download MongoDB Community Server | MongoDB 修改bin/mongod.cfg # mongod.conf# for documentation of all options, see: # http://docs.mongodb.org/manual/reference/configuration-options/# Where and how to store data. storage:dbPat…

conda安装及demo:SadTalker实现图片+音频生成高质量视频

1.安装conda 下载各个版本地址&#xff1a;https://repo.anaconda.com/archive/ win10版本&#xff1a; Anaconda3-2023.03-1-Windows-x86_64 linux版本&#xff1a; Anaconda3-2023.03-1-Linux-x86_64 Windows安装 环境变量 conda -V2.配置conda镜像源 安装pip conda…