首页 > 其他分享 >JS宏进阶:正则表达式的使用

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

时间:2025-01-19 12:57:16浏览次数:3  
标签:匹配 进阶 正则表达式 console JS str 字符串 const

正则表达式,对于任何一门编程语言来说,都是一种非常强大的工具,主要用于搜索、编辑或操作文本和数据。因此,在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 中处理字符串的效率和能力。

标签:匹配,进阶,正则表达式,console,JS,str,字符串,const
From: https://blog.csdn.net/jackispy/article/details/145240882

相关文章

  • 常见的图形库概览-03-D3.js 入门例子
    常见的图形库系列常见的图形库概览-00-overview常见的图形库概览-01-Chart.js入门例子常见的图形库概览-03-D3.js入门例子HighCharts交互式图表-01-入门介绍Plotly函数图像绘制ApexCharts图表入门例子Victory图表基于React,适合React项目,支持移动端Recharts入门......
  • Linux 上安装 Node.js
    在Linux上安装Node.js的方法取决于你使用的发行版。以下是常见的几种安装方法:方法1:通过包管理器安装(推荐)对于Ubuntu/Debian系统:更新系统包索引:sudoaptupdate安装Node.js(LTS版本)你可以直接使用Ubuntu/Debian的官方包管理器安装Node.js,但是推荐使用NodeS......
  • 前端必知必会-Node.js连接MongoDB 创建集合
    文章目录Node.js连接MongoDB创建集合创建集合总结Node.js连接MongoDB创建集合MongoDB中的集合与MySQL中的表相同创建集合要在MongoDB中创建集合,请使用createCollection()方法:示例获取您自己的Node.js服务器创建一个名为“customers”的集合:varMon......
  • 前端必知必会-Node.js连接MongoDB 删除集合
    文章目录Node.js连接MongoDB删除集合删除集合db.dropCollection总结Node.js连接MongoDB删除集合删除集合您可以使用drop()方法删除表或MongoDB中所谓的集合。drop()方法采用包含错误对象和结果参数的回调函数,如果成功删除集合,则返回true,否则返回false。......
  • 为什么说js是弱类型语言,它的优缺点分别是什么?
    JavaScript被认为是弱类型语言,主要是因为它允许变量在不经过强制类型转换的情况下赋予不同数据类型的值。具体来说,在JavaScript中,一个变量可以被赋予数值、字符串、布尔值或对象等不同类型的值,这种灵活性使得JavaScript在编程中带来很大的便利。然而,这种弱类型的特性也带来了一些......
  • 在js中函数返回多个值有哪些方法?
    在JavaScript中,函数本身不能直接返回多个值,但可以通过一些技巧和模式来模拟这一行为。以下是一些常见的方法:使用数组:将多个值放入一个数组中,并返回该数组。这是最简单和最常用的方法。functiongetMultipleValues(){return[1,'two',true];}const[value1,value2......
  • 说说你对AMD、CMD和CommonJS的理解
    在前端开发中,AMD、CMD和CommonJS是三种不同的模块规范,它们各自有着独特的特点和适用场景。下面我将分点详细阐述我对这三种模块规范的理解:一、AMD(异步模块定义)AMD是RequireJS在推广过程中对模块定义的规范化产出,主要用于浏览器端。它使用define()函数来定义模块,允许异步加载模......
  • 写js代码时你喜欢哪种命名方式?
    在前端开发,特别是JavaScript编程中,命名方式(或称为命名约定)对于代码的可读性和可维护性至关重要。以下是一些常见的JavaScript命名方式,以及我个人(以及许多开发者)的偏好:驼峰命名法(CamelCase):小驼峰(lowerCamelCase):第一个单词的首字母小写,后面单词的首字母大写。例如:myVariableNa......
  • node.js毕设公交出行系统论文+程序 (2)
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容选题背景关于公交出行系统的研究,现有研究主要以提升公交运营效率、优化线路规划等方面为主,专门针对构建一个集多种功能于一体,满足用户多样化需求且便捷易用的公交出......
  • node.js毕设公交大厦停车场管理系统论文+程序
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容选题背景关于停车场管理系统的研究,现有研究主要以大型商业中心、小区停车场等场景为主,专门针对公交大厦停车场管理系统的研究较少。在国内外,停车场管理系统发展较为......