JS宏进阶:正则表达式的使用

news2025/1/23 20:20:11

正则表达式,对于任何一门编程语言来说,都是一种非常强大的工具,主要用于搜索、编辑或操作文本和数据。因此,在JS中,也存在相应的对象new RegExp( ),在本章中,将详细介绍正则表达式在JS宏中的运用。

一、正则表达式的创建

在基础篇章中,曾提及正则表达式对象,在JS中有两种创建方法,示例如下:

// 字面量语法

const regex1 = /abc/;

// RegExp 构造函数

const regex2 = new RegExp('abc');

此外,在js中创建正则表达式时,还存在响应的修饰符。如下所示:

符号含义
i忽略大小写(ignoreCase)。
g全局搜索(global)。
m多行匹配(multiline)。
uUnicode 模式(Unicode),ES6 新增,用于正确处理 Unicode 字符。
y粘连模式(sticky),ES6 新增,确保匹配从目标字符串的当前位置开始。
sdotAll 模式,ES2018 新增,使 . 匹配包括换行符在内的所有字符。

因此,在JS中,正则表达式的完整创建语法为:

字面量创建语法:let reg = /正则匹配模式/修饰符号,示例如下

const regexp = /[0-9]+/g  //全局搜索

构造函数创建语法:let reg = new RegExp("正则匹配模式", "修饰符"),示例如下

let reg = new RegExp("[0-9]+", "g") //全局搜索

注意:对于两种创建方法来说,修饰符都是可选的。另外,如果使用new RegExp构造函数来创建正则表达式对象,要匹配 \ 本身,要写成:\\\\,这是因为,他的参数是字符串,在字符串中 \ 是需要转义的,所以,前面两个 \\ 相当于正则表达式中的元字符 \ , 后面的两个 \\ 相当于被元字符 \ 转义的 \ ,连在一起就表示匹配 \ 本身。依次类推:元字符 \d ,需写成 \\d ; \w ,需写成 \\w 等。

二、正则表达式对象中的方法

1、test方法

用于测试一个字符串是否匹配某个模式,返回布尔值。

const regex = new RegExp("hello");
console.log(regex.test("hello world")); // true
console.log(regex.test("world")); // false

上述示例中,用于测试的字符串"hello world"中符合正则匹配模式:hello,返回true。不符合的,就返回false。

2、exec方法

用于在字符串中执行搜索匹配。匹配成功返回一个数组,否则返回 null 。返回的数组包含匹配的结果以及捕获组(如果有的话)。

const regex = new RegExp("(hello) (world)");
const result = regex.exec("hello world");
if (result) {
  console.log(result[0]); // "hello world"
  console.log(result[1]); // "hello"
  console.log(result[2]); // "world"
}

另外,返回的数组包含一些额外的属性,如下图所示:

三、字符串对象String中的正则表达式

在基础篇章中,我们已经了解了字符串对象中的一些常用方法。比如,用于查找某一特定字符索引的serch,字符串替换的replace等等。在这些方法中,我们也可以将正则表达式作为他的参数,这样就可以查找、替换、匹配符合某一特定模式的字符串。

1、字符串方法match

使用正则表达式模式在字符串中查找匹配项。语法如下:

str.match(regexp);

str:是要搜索的字符串对象

regexp:是正则表达式对象

返回值与注意点如下所示:

如果 regexp 没有全局标志 g,则返回一个数组,包含第一个匹配项及其捕获组(如果有的话),以及两个附加属性:index(匹配项在字符串中的位置)和input (被搜索的字符串)。

如果 regexp 有全局标志 g,则返回一个包含所有匹配项的数组,没有捕获组信息。

如果没有匹配项,则返回 null 。

使用实例

const str = "abs12ysjhi892jha98wehj29ashx982y3huiahs89829hiuas8d9902hsd8a9";

// 查找第一个匹配项
const match1 = str.match(/\d+/);
console.log(JSON.stringify(match1)); // ["12"]
	
// 查找所有匹配项
const match2 = str.match(/\d+/g); //使用全局搜索,查找所有匹配项
console.log(JSON.stringify(match2)); // ["12","892","98","29","982","3","89829","8","9902","8","9"]

执行效果如下图所示

2、字符串方法matchAll

返回一个包含所有匹配正则表达式及其分组捕获的迭代器。语法如下:

str.matchAll(regexp);

str:是要搜索的字符串对象

regexp:是正则表达式对象

返回值是一个迭代器,每个迭代项是一个包含匹配项及其捕获组的数组。

使用实例:

const str = "test1test2";
const regex = /t(e)(st(\d?))/g;

const matches = str.matchAll(regex);
for (const match of matches) {
  console.log(match.join(",") + " index: " + match.index + " input:" + match.input + " " + typeof match.groups);
}

// 输出:
// ["test1", "e", "st1", "1", index: 0, input: "test1test2", groups: undefined]
// ["test2", "e", "st2", "2", index: 5, input: "test1test2", groups: undefined]

执行效果图如下所示:

3、字符串方法replace

使用正则表达式模式在字符串中查找匹配项,并替换与此模式匹配的子串。语法如下

str.replace(regexp|substr, newSubStr|function);

str:是要搜索的字符串对象

regexp|substr:是正则表达式对象 | 等待替换的字符串

newSubStr|function:用于替换匹配项的新字符串 | 一个返回替换字符串的函数

返回一个新字符串,其中匹配项被替换为新的字符串或函数返回值。

使用实例如下所示:

const str = "Hello World!";

// 替换匹配项
const newStr1 = str.replace(/world/i, "JavaScript");
console.log(newStr1); // "Hello JavaScript!"

// 使用函数进行替换
const newStr2 = str.replace(/(\w+)\s(\w+)/, (match, p1, p2) => {
  return `${p2}, ${p1}!`;
});
console.log(newStr2); // "World, Hello!"

效果图如下所示:

4、字符串方法search

执行正则表达式和字符串之间的搜索匹配,返回匹配项的索引,或者如果没有匹配项,则返回 -1。语法如下

str.search(regexp);

str:是要搜索的字符串对象

regexp:是正则表达式对象

使用实例:

const str = "Hello World!";

// 查找匹配项的索引
const index = str.search(/world/i);
console.log(index); // 6

5、字符串方法split

使用正则表达式模式在字符串中查找匹配项,并分割字符串。语法如下

str.split(regexp|substr, limit);

str:是要搜索的字符串对象

regexp|substr:要分割的子串(非正则表达式模式)

limit ( 可选 ):一个整数,限制返回的数组长度。

返回值是一个数组,包含被分割后的子串。

使用实例:

const str = "Hello World,   Hello   JavaScript";
	
// 使用正则表达式分割字符串
const parts = str.split(/\s+/);
console.log(JSON.stringify(parts)); // ["Hello","World,","Hello","JavaScript"]
	
// 限制返回数组的长度
const parts2 = str.split(/\s+/, 2);
console.log(JSON.stringify(parts2)); // ["Hello","World,"]

效果图如下所示:

四、总结

new RegExp( ) 提供了一种动态创建正则表达式的方法,而正则表达式对象的方法(如 test和 exec)以及字符串对象的方法(如 match、replace等)则提供了丰富的操作手段来处理和匹配字符串。理解这些方法和标志,可以大大提高你在 JavaScript 中处理字符串的效率和能力。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习笔记——循环神经网络RNN

大家好,这里是好评笔记,公主号:Goodnote,专栏文章私信限时Free。本文详细介绍面试过程中可能遇到的循环神经网络RNN知识点。 文章目录 文本特征提取的方法1. 基础方法1.1 词袋模型(Bag of Words, BOW)工作原…

Git进阶笔记系列(01)Git核心架构原理 | 常用命令实战集合

读书笔记:卓越强迫症强大恐惧症,在亲子家庭、职场关系里尤其是纵向关系模型里,这两种状态很容易无缝衔接。尤其父母对子女、领导对下属,都有望子成龙、强将无弱兵的期望,然而在你的面前,他们才是永远强大的…

SpringBoot读取yml配置文件一组对象数据初始化

1. yml的短横杠语法2. yml数组元素读取并初始化3. 测试结果 1. yml的短横杠语法 - 短横杠加空格,可以表示数组元素,如下配置 表示有名为apps的一组数据,数组的元素对象包含有corpId、corpSecret、appCode三个字段像server.port没有 - 表示的…

基于JAVA的校园二手商品交易平台的设计与开发

摘 要:政府政策引导与社会观念的转变使得国内大学生的创业意识逐渐提高,很多高校大学生开始自主创业。目前我国各大高校暂且还没有较为成型的针对校内学生创业者的校园网络服务平台。本文首先主要是介绍了关于java语言以及web开发的相关技术,…

深度学习核函数

一、核函数的基本概念 核函数在机器学习中具有重要应用价值,常用于支持向量机(SVM)等算法中。 核函数是面试中经常被考到的知识点,对于找工作和实际数据转换都有重要作用。 二、数据建模与核函数的作用 数据越多,可…

数据结构(三) 排序/并查集/图

目录 1. 排序 2.并查集 3.图 1.排序: 1.1 概念: 排序就是将数据按照某种规则进行排列, 具有某种顺序. 分为内排序和外排序. 内排序就是: 将数据放在内存中的排序; 外排序是: 数据太多无法在内存中排序的. 1.2 插入排序: 插入排序包含: 直接插入排序和希尔排序. (1) 直接插入…

ECCV 2024,全新激活函数!

激活函数对深度神经网络的成功可太重要了,它可以提升学习复杂关系的能力,减少过拟合,增强模型性能,与它相关的研究一直是重中之重。最近,这方向有了不少新突破。 ECCV 2024上的这篇,提出了一种可训练的高表…

小米Vela操作系统开源:AIoT时代的全新引擎

小米近日正式开源了其物联网嵌入式软件平台——Vela操作系统,并将其命名为OpenVela。这一举动在AIoT(人工智能物联网)领域掀起了不小的波澜,也为开发者们提供了一个强大的AI代码生成器和开发平台。OpenVela项目源代码已托管至GitH…

ComfyUI实现老照片修复——AI修复老照片(ComfyUI-ReActor / ReSwapper)尚待完善

AI修复老照片,试试吧,不一定好~~哈哈 2023年4月曾用过ComfyUI,当时就感慨这个工具和虚幻的蓝图很像,以后肯定是专业人玩的。 2024年我写代码去了,AI做图没太关注,没想到,现在ComfyUI真的变成了工…

YOLOv5训练自己的数据及rknn部署

YOLOv5训练自己的数据及rknn部署 一、下载源码二、准备自己的数据集2.1 标注图像2.2 数据集结构 三、配置YOLOv5训练3.1 修改配置文件3.2 模型选择 四、训练五、测试六、部署6.1 pt转onnx6.2 onnx转rknn 七、常见错误7.1 训练过程中的错误7.1.1 cuda: out of memory7.1.2 train…

C# OpenCvSharp 部署文档矫正,包括文档扭曲/模糊/阴影等情况

目录 说明 效果 模型 项目 代码 下载 参考 C# OpenCvSharp 部署文档矫正,包括文档扭曲/模糊/阴影等情况 说明 地址:https://github.com/RapidAI/RapidUnDistort 修正文档扭曲/模糊/阴影等情况,使用onnx模型简单轻量部署&#xff0c…

贪心算法(题1)区间选点

输出 2 #include <iostream> #include<algorithm>using namespace std;const int N 100010 ;int n; struct Range {int l,r;bool operator <(const Range &W)const{return r<W.r;} }range[N];int main() {scanf("%d",&n);for(int i0;i&l…

煤矿场景下安全帽检测数据集VOC+YOLO格式179张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;170 标注数量(xml文件个数)&#xff1a;170 标注数量(txt文件个数)&#xff1a;170 标注…

RTX 5090原型据称有24576个CUDA核心和800 W TDP -两个16针连接器

英伟达今年早些时候发布、将于1月30日上市的GeForce RTX 5090&#xff0c;有望成为最出色的显卡之一。然而&#xff0c;硬件侦探HXL发掘出了一款疑似早期原型产品。不过&#xff0c;考虑到传闻中的规格参数&#xff0c;它很有可能会成为GeForce RTX 5090 Ti或者RTX Titan Black…

哪个控制面板适合您?

如今&#xff0c;VPS云主机的控制面板在网站托管中变得越来越重要。对于网站管理者和普通用户来说&#xff0c;这类控制面板提供了一站式的管理工具&#xff0c;可以在同一个界面中处理所有网站的管理任务&#xff0c;极大地减少了多系统间重复操作的麻烦。 但随着越来越多的公…

Redis - 通用命令

目录 了解Redis客户端set 和 getRedis全局命令keys命令exists命令del命令expire命令ttl命令Redis中key的过期策略type 了解Redis客户端 想要输入Redis命令,必须先进入Redis客户端 使用redis-cli连接本机的命令行客户端 redis-cli如果想连接其他的ip和端口的客户端&#xff0…

重学SpringBoot3-WebClient配置与使用详解

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞??收藏评论 重学SpringBoot3-WebClient配置与使用详解 1. 简介2. 环境准备 2.1 依赖配置 3. WebClient配置 3.1 基础配置3.2 高级配置3.3 retrieve()和exchange()区别 4. 使用示例 4.1 基本请求操…

HTML5 新表单属性详解

HTML5 为 <form> 和 <input> 标签引入了一系列新属性&#xff0c;极大地增强了表单的功能和用户体验。这些新属性不仅简化了开发者的工作&#xff0c;还为用户提供了更友好、更高效的交互方式。本文将详细介绍这些新属性&#xff0c;并结合代码示例帮助大家更好地理…

【专题】为2025制定可付诸实践的IT战略规划报告汇总PDF洞察(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p39055 在当今瞬息万变的商业环境中&#xff0c;制定有效的 IT 战略规划对于企业的成功与可持续发展至关重要。本报告深入探讨了制定 IT 战略规划的关键活动&#xff0c;旨在为企业和决策者提供全面且实用的指导。 Gartner的《为202…

JAVA实战开源项目:课程作业管理系统(Vue+SpringBoot) 附源码

本文项目编号 T 023 &#xff0c;文末自助获取源码 \color{red}{T023&#xff0c;文末自助获取源码} T023&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…