JavaScript正则表达式解析:模式、方法与实战案例

news2025/2/23 12:47:46

目录

一、什么是正则表达式

1.创建正则表达式

2.标志(Flags)

3.基本模式

(1)字符匹配

(2)位置匹配

(3)数量匹配

二、常用的正则表达式方法和属性

1.test()‌

2.match()‌

3.exec()‌

4‌.replace()‌

5.search()‌

6‌.split()‌

三、常见的正则表达案例

1.验证手机号码

2.验证邮箱

3.验证身份证号码

4.验证银行卡号码

5.验证密码

6.验证日期格式

四、线上正则表达式测试或生成器工具


文章前提:涵盖了正则表达式的关键要素。模式,即正则表达式的语法和规则;方法,即如何在JavaScript中使用正则表达式进行匹配、搜索、替换等操作;一些实战案例,通过具体示例展示正则表达式的应用;介绍两个线上正则表达式测试和生成器工具。

一、什么是正则表达式

‌JavaScript正则表达式‌是一种用于匹配字符串中字符组合的模式。通过一种简洁的语法,可以执行复杂的字符串搜索、替换等操作。

1.创建正则表达式

字面量语法使用双斜杠包裹一个匹配模式,/正则表达式主体/修饰符(可选)

var pattern1 = /hello/i;

// /hello/i是一个正则表达式

// hello是一个正则表达式主体,用于检索

// i  是一个修饰符

构造函数语法使用new RegExp(pattern, flags)的方式创建一个正则表达式对象。

var pattern2 = new RegExp("world");

2.标志(Flags)

g:全局搜索。

i:不区分大小写。

m:多行搜索。

s:允许 . 匹配换行符。

u:Unicode 完全匹配。

y:粘性搜索,匹配从目标字符串的当前位置开始。

3.基本模式

正则表达式的语法包括字符匹配、位置匹配、数量匹配等。

(1)字符匹配

.:匹配除换行符以外的任意单个字符。

[]:字符集,匹配方括号中的任意一个字符。例如,[abc]匹配a、b或c。使用连字符-可以表示字符范围,如[a-z]匹配所有小写字母。

^:在字符集开头时表示否定字符集。例如,[^abc]匹配除了a、b、c之外的任意字符。

\d:匹配任意一个数字字符,等价于[0-9]。

\w:匹配任意一个字母、数字或下划线,等价于[A-Za-z0-9_]。

\s:匹配任意一个空白符,包括空格、制表符等。

(2)位置匹配

^:匹配字符串的开始位置。

$:匹配字符串的结束位置。

(3)数量匹配

*:匹配前面的元素零次或多次。例如,a*匹配零个或多个a。

+:匹配前面的元素至少一次。例如,a+匹配一个或多个a。

?:匹配前面的元素零次或一次。例如,a?匹配零个或一个a。

{n}:精确匹配前面的元素n次。例如,a{3}匹配三个a。

{n,}:匹配前面的元素至少n次。

{n,m}:匹配前面的元素至少n次,但不超过m次。

二、常用的正则表达式方法和属性

1.test()

用于测试字符串是否符合正则表达式的规则,返回truefalse

const regex = /World/;
const str = "Hello World";
console.log(regex.test(str)); // true

const str2 = "Hello";
console.log(regex.test(str2)); // false

2.match()

返回字符串中所有匹配正则表达式的结果,如果没有匹配,返回null

const regex2 = /\d+/g; // 全局匹配数字
const str12 = "There are 123 apples and 456 oranges.";
const matches = str12.match(regex2);

console.log(matches); // 输出: ["123", "456"]

3.exec()‌

获取正则表达式匹配的片段,返回一个数组,包含匹配的字符串和匹配信息。如果没有匹配,返回null

const regex3 = /(\d{4})-(\d{2})-(\d{2})/;
const str3 = "Today's date is 2023-10-05.";
const result = regex3.exec(str3);

if (result) {
    console.log(result[0]); // 完整匹配: "2023-10-05"
    console.log(result[1]); // 第一个捕获组: "2023"
    console.log(result[2]); // 第二个捕获组: "10"
    console.log(result[3]); // 第三个捕获组: "05"
} else {
    console.log("没有找到匹配的片段");
}

4‌.replace()

用于在字符串中用一些字符串替换另一些字符串,或替换一个与正则表达式匹配的子串。

const regex4 = /apple/gi; // 全局匹配,忽略大小写
const str4 = "I have 2 apples, 3 bananas, and 1 pear.";
const replaced = str4.replace(regex4, "orange");
console.log(replaced); // 输出: "I have 2 oranges, 3 bananas, and 1 pear."

// 使用替换函数
const newStr = str4.replace(/(\d+)/g, (match, p1) => parseInt(p1) * 2);
console.log(newStr); // 输出: "I have 4 oranges, 6 bananas, and 2 pear."

5.search()

用于检索字符串中指定的子字符串,或与正则表达式相匹配的子字符串,并返回子串的起始位置。

const str5 = "Hello, world!";
const index = str5.search(/world/);
console.log(index); // 输出: 7

6‌.split()

根据给定的正则表达式将字符串分割成子串,然后将结果作为字符串数组返回。

const str6 = "apple,orange,banana,pear";
const fruits = str6.split(/,/);

console.log(fruits); // 输出: ["apple", "orange", "banana", "pear"]

三、常见的正则表达案例

1.验证手机号码

const phoneRegex = /^1[3-9]\d{9}$/;

2.验证邮箱

const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

3.验证身份证号码

const idCardRegex = /^\d{17}[\d|x|X]$/;

4.验证银行卡号码

const bankCardRegex = /^\d{16,19}$/;

5.验证密码

// 密码可以包含数字、大小写字母和特殊字符,并且长度至少为8个字符

const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;

6.验证日期格式

const dateRegex = /^\d{4}-\d{2}-\d{2}$/;

四、线上正则表达式测试或生成器工具

1.正则表达式在线测试 | 菜鸟工具  https://www.jyshare.com/front-end/854/https://www.jyshare.com/front-end/854/https://www.jyshare.com/front-end/854/

2.正则表达式生成器,常用正则表达式在线生成

正则表达式生成器,常用正则表达式在线生成https://www.sojson.com/regex/generatehttps://www.sojson.com/regex/generate

记录

若文章对你有帮助,点赞、收藏加关注吧!

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

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

相关文章

Nginx在Linux中的最小化安装方式

1. 安装依赖 需要安装的东西: wget​,方便我们下载Nginx的包。如果是在Windows下载,然后使用SFTP上传到服务器中,那么可以不安装这个软件包。gcc g​,Nginx是使用C/C开发的服务器,等一下安装会用到其中的…

【大模型】ChatGPT 高效处理图片技巧使用详解

目录 一、前言 二、ChatGPT 4 图片处理介绍 2.1 ChatGPT 4 图片处理概述 2.1.1 图像识别与分类 2.1.2 图像搜索 2.1.3 图像生成 2.1.4 多模态理解 2.1.5 细粒度图像识别 2.1.6 生成式图像任务处理 2.1.7 图像与文本互动 2.2 ChatGPT 4 图片处理应用场景 三、文生图操…

基于python+Django+mysql鲜花水果销售商城网站系统设计与实现

博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育、辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

-bash: /java: cannot execute binary file

在linux安装jdk报错 -bash: /java: cannot execute binary file 原因是jdk安装包和linux的不一致 程序员的面试宝典,一个免费的刷题平台

免费为企业IT规划WSUS:Windows Server 更新服务 (WSUS) 之快速入门教程(一)

哈喽大家好,欢迎来到虚拟化时代君(XNHCYL),收不到通知请将我点击星标!“ 大家好,我是虚拟化时代君,一位潜心于互联网的技术宅男。这里每天为你分享各种你感兴趣的技术、教程、软件、资源、福利…

面试--你的数据库中密码是如何存储的?

文章目录 三种分类使用 MD5 加密存储加盐存储Base64 编码:常见的对称加密算法常见的非对称加密算法https 传输加密 在开发中需要存储用户的密码,这个密码一定是加密存储的,如果是明文存储那么如果数据库被攻击了,密码就泄露了。 我们要对数据…

模型部署工具01:Docker || 用Docker打包模型 Build Once Run Anywhere

Docker 是一个开源的容器化平台,可以让开发者和运维人员轻松构建、发布和运行应用程序。Docker 的核心概念是通过容器技术隔离应用及其依赖项,使得软件在不同的环境中运行时具有一致性。无论是开发环境、测试环境,还是生产环境,Do…

Restormer: Efficient Transformer for High-Resolution Image Restoration解读

论文地址:Restormer: Efficient Transformer for High-Resolution Image Restoration。 摘要 由于卷积神经网络(CNN)在从大规模数据中学习可推广的图像先验方面表现出色,这些模型已被广泛应用于图像复原及相关任务。近年来&…

四、CSS效果

一、box-shadow box-shadow:在元素的框架上添加阴影效果 /* x 偏移量 | y 偏移量 | 阴影颜色 */ box-shadow: 60px -16px teal; /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */ box-shadow: 10px 5px 5px black; /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半…

火狐浏览器Firefox一些配置

没想到还会开这个…都是Ubuntu的错 一些个人习惯吧 标签页设置 常规-标签页 1.按最近使用顺序切换标签页 2.打开新标签而非新窗口(讨厌好多窗口) 3.打开新链接不直接切换过去(很打断思路诶) 4.关闭多个标签页时不向我确认 启动…

MECD+: 视频推理中事件级因果图推理--VLM长视频因果推理

论文链接:https://arxiv.org/pdf/2501.07227v1 1. 摘要及主要贡献点 摘要: 视频因果推理旨在从因果角度对视频内容进行高层次的理解。然而,目前的研究存在局限性,主要表现为以问答范式执行,关注包含孤立事件和基本因…

Python基于Django的社区爱心养老管理系统设计与实现【附源码】

博主介绍:✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…

Docker 单机快速部署大数据各组件

文章目录 一、Spark1.1 NetWork 网络1.2 安装 Java81.3 安装 Python 环境1.4 Spark 安装部署 二、Kafka三、StarRocks四、Redis五、Rabbitmq六、Emqx6.1 前言6.2 安装部署 七、Flink八、Nacos九、Nginx 一、Spark 1.1 NetWork 网络 docker network lsdocker network create -…

【MySQL】:Linux 环境下 MySQL 使用全攻略

📃个人主页:island1314 🔥个人专栏:MySQL学习 ⛺️ 欢迎关注:👍点赞 👂🏽留言 😍收藏 💞 💞 💞 1. 背景 🚀 世界上主…

【思科】NAT配置

网络拓扑图 这个网络拓扑的核心是Router1,它通过配置多个VLAN子接口来实现对不同VLAN的支持,并通过NAT进行地址转换,使得内部网络能够与外部网络进行通信。Router1上配置了FastEthernet0/0.x接口,并启用了802.1Q封装,…

WGAN - 瓦萨斯坦生成对抗网络

1. 背景与问题 生成对抗网络(Generative Adversarial Networks, GANs)是由Ian Goodfellow等人于2014年提出的一种深度学习模型。它包括两个主要部分:生成器(Generator)和判别器(Discriminator)…

【数学建模美赛速成系列】O奖论文绘图复现代码

文章目录 引言折线图 带误差棒得折线图单个带误差棒得折线图立体饼图完整复现代码 引言 美赛的绘图是非常重要得,这篇文章给大家分享我自己复现2024年美赛O奖优秀论文得代码,基于Matalab来实现,可以直接运行出图。 折线图 % MATLAB 官方整理…

兼职全职招聘系统架构与功能分析

2015工作至今,10年资深全栈工程师,CTO,擅长带团队、攻克各种技术难题、研发各类软件产品,我的代码态度:代码虐我千百遍,我待代码如初恋,我的工作态度:极致,责任&#xff…

svn tag

一般发布版本前,需要在svn上打个tag。步骤如下: 1、空白处右击,选择TortoiseSVN->Branch/tag; 2、填写To path,即tag的路基以及tag命名(一般用版本号来命名);填写tag信息;勾选cr…

项目开发实践——基于SpringBoot+Vue3实现的在线考试系统(七)

文章目录 一、题库管理模块实现1、新增题目功能实现1.1 页面设计1.2 前端功能实现1.3 后端功能实现1.4 效果展示2、题目列表功能实现2.1 页面设计2.2 前端功能实现2.3 后端功能实现2.3.1 后端查询题目列表接口实现2.3.2 后端编辑试题接口实现2.4 效果展示二、代码下载一、题库管…