JS正则02——js正则表达式中常用的方法、常见修饰符的使用详解以及各种方法使用情况示例

JS正则02——js正则表达式中常用的方法、常见修饰符的使用详解以及各种方法使用情况示例

  • 1. 前言
    • 1.1 简介
    • 1.2 js正则特殊字符即使用示例
  • 2. 创建正则表达式的方式
    • 2.1 两种创建正则表达式的方式
    • 2.2 关于修饰符
  • 3. 正则表达式中常用的方法
    • 3.1 test() 方法——正则表达式对象的方法
    • 3.2 search()方法——字符串对象的方法
    • 3.3 replace()方法——字符串对象的方法
      • 3.3.1 语法
      • 3.3.2 例子
        • 3.3.2.1 不使用正则例子
        • 3.3.2.2 使用正则例子
    • 3.4 split()方法——字符串对象的方法
      • 3.4.1 语法
      • 3.4.2 例子
    • 3.5 match()方法——字符串对象的方法
      • 3.5.1 关于match()方法
      • 3.5.2 match()的例子
    • 3.6 exec()方法——正则表达式对象的方法
  • 4. 关于特定字符`()`——分组 + 捕获
    • 4.1 描述
    • 4.2 示例
  • 5. 总结关于常见修饰符的使用
  • 6. 参考

1. 前言

1.1 简介

  • JavaScript正则表达式是一种强大的工具，用于在字符串中匹配和操作文本。它可以用来验证输入的格式、提取特定的文本、替换文本等。

1.2 js正则特殊字符即使用示例

  • 可以看上篇文章，如下
    JS正则01——JS正则表达式中各元字符的详细介绍以及常用的js正则示例.

2. 创建正则表达式的方式

2.1 两种创建正则表达式的方式

  • 使用字面量创建：

    • 语法如下：
      var regex = /pattern/modifiers;   // 修饰符 modifiers 可以省略
    • 举例如下：
      var regex = /hello/;   // 匹配包含"hello"的字符串var regex_2 = /^hello$/;   //严格匹配，只能匹配"hello"字符串var regex_3 = /^hello$/i;  //只能匹配"hello"字符串，但不区分大小写匹配

  • 使用构造函数创建：

    • 语法如下：
      var regex = new RegExp("pattern");或var regex = new RegExp("pattern","modifiers");
    • 举例如下：
      var value = "hEllo";var regex = new RegExp("hello");   // 匹配包含"hello"的字符串
var regex_2 = new RegExp("^hello$");   // 严格匹配，只能匹配"hello"字符串
var regex_3 = new RegExp("^hello$","i");  //只能匹配"hello"字符串，但不区分大小写匹配alert( regex.test(value) ); // true-匹配成功   false-匹配失败

2.2 关于修饰符

  • 常用的JavaScript正则表达式修饰符如下：
    • i：不区分大小写（在匹配时忽略大小写）。
    • g：全局匹配（查找所有匹配项，而不仅仅是第一个）。
    • m：多行匹配，将开始和结束字符（^和$）视为多行的开始和结束，而不仅仅是整个字符串的开始和结束。
    • s：单行匹配，使点（.）元字符匹配包括换行符在内的任何字符。
    • u：Unicode匹配（启用完整的Unicode匹配模式，将模式视为由Unicode代码点组成的序列）。
    • y：粘性匹配（只从目标字符串的当前位置开始匹配）。
  • 关于使用例子，下面我们会介绍，请继续……

3. 正则表达式中常用的方法

3.1 test() 方法——正则表达式对象的方法

  • test()：
    • 用于检测字符串是否匹配正则表达式。返回值为布尔值，如果匹配成功则返回true，否则返回false。
    • 如果只需判断字符串是否匹配正则表达式，可以使用该test()方法。
  • 上面《2.1 两种创建正则表达式的方式》中以及上篇文章都是用 test() 方法说的示例，所以此处不再介绍。

3.2 search()方法——字符串对象的方法

  • search()：
    用于在字符串中查找与正则表达式匹配的第一个位置。返回匹配到的位置索引。如果没有匹配到，则返回 -1。
  • 例子：
    var value = "abc-hello-123";
var regex = /hello/; alert( value.search(regex) ); // 返回4 （注意：search() 是字符串的方法，并且字符串的index从0开始）

    var value = "abc-hello-123";
var regex = /^hello$/; alert( value.search(regex) ); // 返回-1（因为同时使用 ^和$ 时是严格匹配）

3.3 replace()方法——字符串对象的方法

3.3.1 语法

  • replace()：
    • JavaScript中的正则表达式replace()方法用于在字符串中替换匹配的文本。
    • 语法：
      string.replace(regexp|substr, newSubstr|function)
      • regexp|substr：可以是一个正则表达式或者一个要被替换的子字符串。
      • newSubstr|function：可以是一个新的字符串或者一个用于替换的函数。
      • 如果第一个参数是一个正则表达式，replace()方法将会替换所有匹配的文本。如果第一个参数是一个字符串，replace()方法只会替换第一个匹配的文本。

3.3.2 例子

3.3.2.1 不使用正则例子
  • 如下：
    var value = "abc-hello-123-hello-567";alert( value.replace("hello","good") ); // 返回 abc-good-123-hello-567（非正则表达式时：只替换第一个匹配的文本）
3.3.2.2 使用正则例子
  • 例子1——第二个参数是新字符串：
    var value = "abc-hello-123-hello-567";
var regex = /hello/; alert( value.replace(regex,"good") ); // 返回 abc-good-123-hello-567（只替换第一个hello）

    var value = "abc-hello-123-hello-567";
var regex = /hello/g; alert( value.replace(regex,"good") ); // 返回 abc-good-123-good-567（使用 g 可以全局替换，不只是替换第一个）
  • 例子2——第二个参数是函数：
    var value = "abc-hello-123";
var regex = /hello/; var newValue = value.replace(regex, function(str) {return str.toUpperCase();
});alert(newValue);  // 返回：abc-HELLO-123

3.4 split()方法——字符串对象的方法

3.4.1 语法

  • JavaScript中的正则表达式split()方法用于将字符串分割成数组，根据指定的正则表达式模式进行分割。
  • 语法：
    str.split(regexp|separators)

3.4.2 例子

  • 例子1——使用一般分隔符分割，不使用正则表达式
    var value = "apple;banana;orange";console.log(value.split(";"));  //输出： ['apple', 'banana', 'orange']
  • 例子2——使用正则表达式
    var value = "I-123-love-456-you";var regex = /[-]\d+[-]/; console.log(value.split(regex));  //输出： ['I', 'love', 'you']

3.5 match()方法——字符串对象的方法

3.5.1 关于match()方法

  • 关于match()方法
    • 通过调用该方法可以在字符串中查找匹配的内容。
    • 如果 regexp 没有标记 g，那么它会以数组形式返回第一个匹配结果，数组中包含捕获组和属性 index（匹配位置）、input（输入字符串，等于 str）：。
    • 如果正则表达式具有全局标志（g），match()方法将返回一个数组，包含所有匹配到的内容。
    • 如果没有找到匹配项，则返回null。
  • 语法：
    str.match(regexp)

3.5.2 match()的例子

  • 例子1——：不使用全局匹配（g）
    var value = "abc-hello-123-hello-567";var regex = /hello/;var result = value.match(regex);  // 匹配结果var match = result[0]; // 匹配到的字符串
var index = result.index; // 匹配到的字符串在原始字符串中的索引位置(第一个位置)console.log(result); // 输出匹配到的字符和其他信息
console.log(result=="hello"); // 输出true
console.log(match);  // 输出 hello
console.log(index);  // 输出 4
    在这里插入图片描述
  • 例子2——：使用全局匹配（g）
    var value = "abc-hello-123-hello-567";var regex = /hello/g;  // 使用 g 可以全局替换，不只是替换第一个var result = value.match(regex);  // 匹配结果console.log(result); // 输出匹配结果数组：['hello', 'hello']
    在这里插入图片描述

3.6 exec()方法——正则表达式对象的方法

  • 关于exec()方法
    • exec()是 JavaScript 正则表达式对象的一个方法，用于在字符串中执行匹配操作。
    • exec()方法返回一个数组，包含匹配到的内容以及其他相关信息，如果没有找到匹配项，则返回null。
    • exec()方法好像不支持全局匹配，只能匹配第一个，设置了 g 不生效！
  • 例子：
    var value = "abc-hello-123-hello-567";var regex = /hello/;var result = regex.exec(value);  // 匹配结果var match = result[0]; // 匹配到的字符串
var index = result.index; // 匹配到的字符串在原始字符串中的索引位置console.log(result);
console.log(match);  // 输出 hello
console.log(index);  // 输出 4
    在这里插入图片描述

4. 关于特定字符()——分组 + 捕获

4.1 描述

  • ()括号在正则表达式中有特殊的含义，用于分组和捕获匹配的内容。
    • 分组：
      ()可以将多个字符组合成一个单元，形成一个子表达式。例如，/(ab)+/可以匹配连续出现的"ab"字符串，如"abab"、"ababab"等。
    • 捕获：
      ()还可以用于捕获匹配的内容，以便后续使用。捕获的内容可以通过$1、$2等变量进行引用。例如，/(\d{4})-(\d{2})-(\d{2})/ 可以匹配日期格式，同时将 年、月、日分别捕获到 $1、$2、$3 中。

4.2 示例

  • 分组示例：
    • /(abc)+/：匹配连续出现的"abc"字符串，如"abcabc"、"abcabcabc"等
    • 更多示例也可以看上篇文章的例子，好多用到了分组：
      JS正则01——JS正则表达式中各元字符的详细介绍以及常用的js正则示例.
  • 捕获示例：
    • 示例1：匹配日期格式，如"2022-12-29"，并将年、月、日分别捕获到$1、$2、$3中。
      let str_0 = "2022-12-29";var regex_0 = /(\d{4})-(\d{2})-(\d{2})/;let result_0 = str_0.match(regex_0); //匹配结果console.log(result_0);console.log(result_0[0]); // 输出 2022-01-01（匹配到的字符串）console.log(result_0[1]); // 输出 2022（捕获到的）
console.log(result_0[2]); // 输出 12（捕获到的）
console.log(result_0[3]); // 输出 29（捕获到的）
      在这里插入图片描述
    • 示例2：
      let str = "I love JavaScript";// var regex = /JavaScript/;
var regex = /Java(Script)/;
let result = str.match(regex);console.log(result); console.log( result[0] );     // 输出 匹配结果：JavaScript (full match)
console.log( result[1] );     // 输出 捕获组：Script (first capturing group)
console.log( result.length ); // 2// Additional information:
console.log( result.index );  // 7 (match position)
console.log( result.input );  // I love JavaScript (source string)
      在这里插入图片描述

5. 总结关于常见修饰符的使用

  • i：不区分大小写匹配
    var value = "HeLLo";var regex = /^hello$/i; 
// var regex = new RegExp("^hello$","i");  // 使用构造函数创建方式alert(regex.test(value));
  • g: 全局匹配（查找所有匹配项，而不仅仅是第一个）。
    这个参考上面写的《3.5.2 match()的例子》中的例2，已经使用了这个修饰符，所以此处不介绍了。
  • g和i结合
    var value = "HeLLo-1-aa-hello-b-hEllo";// 下面两种正则方式均可以
var regex = /hello/gi;  // 既全局匹配 又 忽略大小写匹配
var regex_2 = new RegExp("hello","gi");  var result = value.match(regex);console.log(result); // 输出： ['HeLLo', 'hello', 'hEllo']
    在这里插入图片描述

6. 参考

  • 如下：
    https://javascript.info/regexp-methods.

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

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

相关文章

Vue之监测数据的原理（对象）

Vue之监测数据的原理（对象）

大家有没有想过，为什么vue可以监测到数据发生改变？其实底层借助了Object.defineProperty，底层有一个Observer的构造函数 让我为大家简单的介绍一下吧！ 我用对象为大家演示一下 const vm new Vue({el: "#app",data: {ob…
阅读更多...
文献速递：帕金森的疾病分享--多模态机器学习预测帕金森病

文献速递：帕金森的疾病分享--多模态机器学习预测帕金森病

文献速递：帕金森的疾病分享–多模态机器学习预测帕金森病 Title 题目 Multi-modality machine learning predicting Parkinson’s disease 多模态机器学习预测帕金森病 01 文献速递介绍 对于渐进性神经退行性疾病，早期和准确的诊断是有效开发和使…
阅读更多...
【精品】集合list去重

【精品】集合list去重

示例一&#xff1a;对于简单类型&#xff0c;比如String public static void main(String[] args) {List<String> list new ArrayList< >();list.add("aaa");list.add("bbb");list.add("bbb");list.add("ccc");list.add(…
阅读更多...
网络工程师必备的网络端口大全（建议收藏）

网络工程师必备的网络端口大全（建议收藏）

端口是一种数字标识&#xff0c;用于在计算机网络中进行通信&#xff0c;你完全可以把端口简单的理解为是计算机和外界通讯交流的出口。但在网络技术中&#xff0c;端口一般有两种含义&#xff1a; &#xff08;1&#xff09;硬件设备中的端口 如交换机、路由器中用于链接其他…
阅读更多...
“金三银四”招聘季，大厂争招鸿蒙人才

“金三银四”招聘季，大厂争招鸿蒙人才

在金三银四的招聘季中&#xff0c;各大知名互联网企业纷纷加入了对鸿蒙人才的争夺战。近日&#xff0c;包括淘宝、京东、得物等在内的知名APP均宣布启动鸿蒙星河版原生应用开发计划。这一举措不仅彰显了鸿蒙生态系统的迅猛发展&#xff0c;还催生了人才市场的繁荣景象。据数据显…
阅读更多...
遥感影像处理（ENVI+ChatGPT+python+ GEE）处理高光谱及多光谱遥感数据

遥感影像处理（ENVI+ChatGPT+python+ GEE）处理高光谱及多光谱遥感数据

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。本文重点介绍ChatGPT在遥感中的应用&#xff0c;人工智能…
阅读更多...
Vue——携带参数跳转路由

Vue——携带参数跳转路由

Vue学习之——跳转路由 前情回顾 当我们进行点击修改时&#xff0c;会进行跳转到修改页面&#xff0c;为了完成回显数据&#xff08;根据对应id查找&#xff09;&#xff0c;我们需要携带对应选择中的id跳转到修改页面&#xff0c;让其进行查找回显 学习useRoute和useRoute…
阅读更多...
webstorm2023.3.4安装与破解

webstorm2023.3.4安装与破解

WebStorm安装步骤 打开JetBrains官方网站&#xff08;https://www.jetbrains.com/webstorm/&#xff09; 运行.exe 选择安装路径 第一个意思是是否创建桌面快捷方式&#xff0c;可根据需要选择&#xff1b;第二个.js .css .html勾选后之后js css html文件默认会用webstor…
阅读更多...
AI Agent

AI Agent

目录 一、什么是Agent 二、什么是MetaGPT【多智能体框架介绍】 三、MetaGPT的背景 一、什么是Agent 智能体 LLM观察思考行动记忆 Agent&#xff08;智能体&#xff09; 一个设置了一些目标或任务&#xff0c;可以迭代运行的大型语言模型。这与大型语言模型&#xff08;LLM&am…
阅读更多...
985机械研一转码，java还是c++？

985机械研一转码，java还是c++？

985机械研一转码&#xff0c;java还是c&#xff1f; 在开始前我分享下我的经历&#xff0c;我刚入行时遇到一个好公司和师父&#xff0c;给了我机会&#xff0c;一年时间从3k薪资涨到18k的&#xff0c; 我师父给了一些 电气工程师学习方法和资料&#xff0c;让我不断提升自己&…
阅读更多...
【OpenGL的着色器03】内置变量（gl_Position等）

【OpenGL的着色器03】内置变量（gl_Position等）

目录 一、说明 二、着色器的变量 2.1 着色器变量 2.2 着色器内置变量 三、最常见内置变量使用范例 3.1 常见着色器变量 3.2 示例1&#xff1a; gl_PointSize 3.3 示例2&#xff1a;gl_Position 3.4 gl_FragColor 3.5 渲染点片元坐标gl_PointCoord 3.6 gl_PointCoo…
阅读更多...
【PyTorch][chapter 20][李宏毅深度学习]【无监督学习][ GAN]【实战】

【PyTorch][chapter 20][李宏毅深度学习]【无监督学习][ GAN]【实战】

前言 本篇主要是结合手写数字例子,结合PyTorch 介绍一下Gan 实战 第一轮训练效果 第20轮训练效果,已经可以生成数字了 68 轮 目录&#xff1a; 谷歌云服务器&#xff08;Google Colab&#xff09; 整体训练流程 Python 代码 一 谷歌云服务器&#xff08;Google Colab&…
阅读更多...
Open CASCADE学习|曲线曲面连续性

Open CASCADE学习|曲线曲面连续性

1、曲线的连续性 曲线的连续性是三维建模、动画设计等领域中非常重要的一个概念&#xff0c;它涉及到曲线在不同点之间的连接方式和光滑程度。下面将详细介绍曲线的连续性&#xff0c;包括C连续性和G连续性。 1.1C连续性&#xff08;参数连续性&#xff09; C连续性是指曲线…
阅读更多...
使用MyBatisPlus实现向数据库中存储List类型的数据

使用MyBatisPlus实现向数据库中存储List类型的数据

使用MyBatisPlus实现向数据库中存储List类型的数据 问题描述 建表时&#xff0c;表中的这五个字段为json类型 但是在入库的时候既不能写入数据&#xff0c;也不能查询出数据。 解决方案&#xff1a; 1.首先明确&#xff0c;数据存入的时候是经过了数据类型转化&#xff0c…
阅读更多...
数据之光：探索数据库技术的演进之路

数据之光：探索数据库技术的演进之路

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…
阅读更多...
喜讯！持安科技CEO何艺获评安全419《2023年度十大优秀创业者》

喜讯！持安科技CEO何艺获评安全419《2023年度十大优秀创业者》

近日&#xff0c;由网络安全产业资讯媒体安全419主办的《年度策划》2023年度十大优秀创业者正式出炉&#xff0c;零信任办公安全技术创新企业持安科技创始人兼CEO何艺&#xff0c;获评十大优秀创业者。 这是安全419第二届推出该项目的评选活动&#xff0c;安全419编辑老师在多年…
阅读更多...
抽象类、模板方法模式

抽象类、模板方法模式

抽象类概述 在Java中abstract是抽象的意思&#xff0c;如果一个类中的某个方法的具体实现不能确定&#xff0c;就可以申明成abstract修饰的抽象方法&#xff08;不能写方法体了&#xff09;&#xff0c;这个类必须用abstract修饰&#xff0c;被称为抽象类。 抽象方法定义&…
阅读更多...
这些单片机汇编语言的错误，你还在犯错吗？

这些单片机汇编语言的错误，你还在犯错吗？

在单片机开发中&#xff0c;很多工程师会选择汇编语言来作为底层编程&#xff0c;来直接控制硬件和高校执行命令&#xff0c;然而因为汇编语言是直接与硬件交互&#xff0c;所以很容易出现错误&#xff0c;本文将基于Keil C51汇编器的环境总结单片机汇编语言常见的错误&#xf…
阅读更多...
人工智能_大模型010_Centos7.9中CPU安装ChatGLM3-6B大模型_安装使用_010---人工智能工作笔记0145

人工智能_大模型010_Centos7.9中CPU安装ChatGLM3-6B大模型_安装使用_010---人工智能工作笔记0145

从一个空的虚拟机开始安装: https://www.modelscope.cn/models/ZhipuAI/chatglm3-6b/files 可以看到这里有很多的数据文件,那么这里 这里点击模型文件就可以下载,这个就是chatglm3-6B的文件,需要点击每个文件,然后点击右边的下载,把文件都下载下来 右侧有下载按钮.点击下载可…
阅读更多...
使用Fabric创建的canvas画布背景图片，自适应画布宽高

使用Fabric创建的canvas画布背景图片，自适应画布宽高

之前的文章写过vue2使用fabric实现简单画图demo&#xff0c;完成批阅功能&#xff1b;但是功能不完善&#xff0c;对于很大的图片就只能显示一部分出来&#xff0c;不符合我们的需求。这就需要改进&#xff0c;对我们设置的背景图进行自适应。 有问题的canvas画布背景 修改后的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023