JS——正则表达式(超详细)

news2025/1/31 11:01:12

正则表达式

  • 概念
  • 创建正则表达式
  • 正则表达式常用方法
    • test(字符串)
    • search(正则表达式)
    • 正则表达式.exec(字符串)
    • 字符串.match(正则表达式)
    • 字符串.replace(正则表达式,新的内容)
  • 断言
  • 范围类
  • 字符类
  • 字符类取反
  • 修饰符
    • g:global全文搜索
    • i:ignore case 忽略大小写
    • m:multiple lines 多行搜索
    • 其他标志符
  • 量词符
  • 贪婪模式
  • 非贪婪模式
  • 分组
  • 反向引用

概念

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法。

创建正则表达式

两种方法:字面量方式、构造函数方式

//字面量方式,其由包含在斜杠之间的模式组成,如下所示:
var re = /ab+c/;
//构造函数方式,调用RegExp对象的构造函数,如下所示:
var re = new RegExp("ab+c");

正则表达式常用方法

  • 校验数据

test(字符串)

测试字符是否满足正则表达式规则,如果测试到有,则返回true;没有则返回flase
语法:正则表达式.test(字符串) 正则表达式提供的方法

var reg=/[123]/
var str='1'
var result=reg.test(str)
console.log(result)//flase

search(正则表达式)

search() 方法执行正则表达式和 String 对象之间的一个搜索匹配。
语法:字符串.search(正则表达式) 字符串提供的方法

var reg=/\d/   //匹配阿拉伯数字
var str="abcdefg3sgbh"
var res=str.search(reg) 
console.log(res) //7
//验证方法 找到返回下标 找不到返回-1
//在字符串中找到满足正则表达式的那一部分
区别:
.test()方法是正则表达式提供的,.search()是字符串提高的,
.test()方法返回布尔值,search()返回下标
  • 提取数据

正则表达式.exec(字符串)

exec() 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。 正则表达式提供的方法

var reg=/\d/  
var str="abcd456efg"
var res=reg.exec(str)
console.log(res)//返回一个数组,内容是4
//字符串中满足正则表达式的部分提取出来
//遇到满足条件的就返回,所以只返回4

字符串.match(正则表达式)

match() 方法检索返回一个字符串匹配正则表达式的结果。 字符串提供的方法

var reg=/\d/
var str="abcd456efg"
var res=str.match(reg) //字符串中满足表达式的部分提取出来
console.log(res) 
区别:
正则表达式.exec(字符串),正则表达式提供的方法
字符串.match(正则表达式) 字符串的方法
相同:
都返回一个数组,只要匹配到符合规则的数据就返回
  • 替换数据

字符串.replace(正则表达式,新的内容)

replace() 方法返回一个由替换值(replacement)替换部分或所有的模式(pattern)匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式,替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串,则仅替换第一个匹配项。字符串提供的方法

var reg=/\d/
var str="11123bcd"
var res=str.replace(reg,"a") //将数字换为a
console.log(res)//a1123bcd 只要匹配到符合规则的就返回

断言

在这里插入图片描述

范围类

在[]组成的类内部是可以连写的

let text = 'a1B2d3X4Z5'
let reg=/[a-zA-Z]/
text.replace(reg,'Q')//Q1Q3Q4Q5

字符类

在这里插入图片描述

字符类取反

很多时候碰到这么一种情况,即不想匹配某些字符,其他都匹配。此时,可以使用字符类取反——使用元字符^,创建反向类,即不属于某类的内容。

[^abc]表示不是字符a或b或c的内容
let reg=/[^abc]/g
let text='a1b2c3d4e5'
console.log(text.replace(reg,'X')) //输出aXbXcXdXeX

修饰符

在正常情况下,正则匹配到第一个匹配项则停止,并且默认大小写敏感,如果想修改默认选项,则需要修饰符。

g:global全文搜索

var reg=new RegExp('l');
var a='hello'.replace(reg,'f')
console.log(a)//输出结果为:heflo
var reg=new RegExp('l','g');//加上g标签表示全文搜索
var a='hello'.replace(reg,'f')
console.log(a)//输出结果为:heffo (所有的 l 都换成了 f )

i:ignore case 忽略大小写

var reg=new RegExp('l','g');
var a='helloHELLO'.replace(reg,'f')
console.log(a)//输出结果为:heffoHELLO
var reg=new RegExp('l','gi');//加上i标签表示忽略大小写
var a='helloHELLO'.replace(reg,'f')
console.log(a)//输出结果为:heffoHEffO (大写和小写的l都被替换了)

m:multiple lines 多行搜索

var reg=new RegExp('od')
var str='so good\n so good'
var result=str.replace(reg,'hi')
console.log(result)
//结果为:
 so gohi
 so good
 //只给第一行匹配了
var reg=new RegExp('od','gm')//加上m标签表示多行匹配
var str='so good\n so good'
var result=str.replace(reg,'hi')
console.log(result)
//结果为:
 so gohi
 so gohi 

其他标志符

s:允许 . 匹配换行符。
u:使用unicode码的模式进行匹配。
y:执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。

量词符

在这里插入图片描述

贪婪模式

之前说了正则表达式的量词,但量词会带来一个到底匹配哪个的问题
例如:

var str="12345678"
var reg=/\d{3,6}/g
str.replace(reg,'X')  //X78

可以看到结果是将123456 六个数字替换成了X,所以我们可以得到,正常模式下,正则表达式会尽可能多的匹配。正常情况下,正则表达式采用贪婪模式,即,尽可能多的匹配。

非贪婪模式

一但成功匹配不再继续尝试,这就是非贪婪模式。
只需要在量词后加上?即可

var str="12345678"
var reg=/\d{3,6}?/g
str.replace(reg,'X')  //X45678

分组

在使用正则表达式的时候会想要匹配一串字符串连续出现多次的情况,使用()可以达到分组的功能
例如:(hello){3}
使用符号 | (或)实现选择的功能
例如:

var str='12341235'
let reg=/123(4|5)/g
//1234 1235二选一

反向引用

将一种格式的时间字符串:yyyy-MM-DD转为MM/DD/yyyy类型格式字符串。
由于年月日是不固定的,没法直接转换为固定数值。这时我们可以使用反向引用解决这个问题。
利用$n,n代表着分组的序号,序号是从1开始的。

例如:

let text='2022-02-23'
let reg=/(\d{4})-(\d{2})-(\d{2})/
let res=text.replace(reg,'$3/$2/$1')//将yyyy-MM-DD转换为MM/DD/yyyy
console.log(res)

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

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

相关文章

Web前端 | HTML嵌入JS代码的三种方式

✅作者简介:一位材料转码农的选手,希望一起努力,一起进步! 📃个人主页:每天都要敲代码的个人主页 🔥系列专栏:Web前端 目录 一:JavaScript概述 二: HTML嵌入…

如何升级Vue的版本 vue2.9.6升级到vue3.0

背景:电脑使用多年,一直使用vue 2.x版本,项目开发过程中由于一个模块涉及的集成模块过多,导致需要进行定义的变量越来越多,代码出现冗余,因此在同事的推动下,鉴于vue 3.x的优化,故对…

HTML学生个人网站作业设计:个人主页博客web网页设计制作 (HTML+CSS) (1)

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻 💂 作者主页: 【进入主页—🚀获取更多源码】 🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套…

React函数式组件传值(父子,兄弟,祖先等)以及父子之间方法的调用。

一.前言 react作为一门前端语言,具有独特灵活性,这也是它的魅力所在。前端组件化,也是将整个前端分成了一个一个组件,本期我们讲解的就是react组件之间的传值(包括父子,兄弟,祖先)等…

Vue知识点总结

特出以下声明!!!小编只是一个喜欢系统化总结知识的人,我这里的总结,可以理解为vue的知识框架。有一些关于语法之类的,建议大家去官网看,可以直接施展CV大法,哈哈哈。同时有一些知识点…

【Vue全局事件总线详解】

Vue全局事件总线详解Vue全局事件总线详解简介原理一、满足所有组件都能访问得到全局事件总线二、可以调用 $on ,和 $off 和 $emit实现全局事件总线完整实例代码总结Vue全局事件总线详解 简介 全局事件总线是一种组件间通信的方式,适用于任意组件间通信 全局事件…

1.启动前端项目(命令行)

1、从github或其他地方获得的前端项目,想要看效果 1.用管理员身份运行命令提示符(windows的控制后台) 2.进入前端项目安装的文件夹(这是我的文件夹) 3.在命令行中输入:npm install 4.在命令行中输入&am…

Vben Admin框架 table的使用以及相关的内容

Vben Admin框架 table的使用以及相关的内容 一、table的使用基础示例: Vben Admin官网链接: 官网组件页链接 这是我使用此框架的用法,仅供参考,我是vue3项目中使用此框架,写法是vue3的写法 第一步 引入BasicTable 组件。 // r…

【Web前端】一文带你吃透HTML(上篇)

前端学习路线小总结: 基础入门:HTML CSS JavaScript三大主流框架:VUE REACT Angular深入学习:小程序 Node jQuery TypeScript 前端工程化🍁开始前端之旅吧! 一.HTML简介1.什么是HTML?2.HTML 标签3.HTML 元素4.HTML版本5.Web 浏览器<

Vue computed 报错:Computed property ‘ ‘ was assigned to but it has no setter 错误原因分析与解决办法

错误描述 最近在封装Vue模块时&#xff0c;借助Vue的Computed属性监听传递的数据&#xff0c;但是开发调试过程中控制台取提示Computed property was assigned to but it has no setter 错误。控制台报错如下&#xff1a; 错误分析 根据控制台错误提示&#xff0c;组件中定义…

如何给网页添加icon图标?

做一些小页面或者项目的时候&#xff0c;我们会发现每个网站都有自己的小图标&#xff0c;下面我就告诉你怎么弄这个&#xff0c;超简单的&#xff01;&#x1f49c;&#x1f49c; 网站添加icon小图标网页图标favicon.ico小简介1.添加网站已有icon图标2.自定义icon图标网页图标…

VUE——使用VUE脚手架创建项目

前言 vue脚手架工具&#xff0c;对vue项目构造做了封装&#xff0c;直接使用vue-cli创建项目&#xff0c;常用配置自动帮你完成&#xff0c;不用自己像使用webpack一样配置。 目录 1、安装 npm i vue 2、创建vue项目 3、运行项目 1、安装 npm i vue ps:项目化开发中&…

前端加密,后端解密的过程及代码(密码明文传输解决,不是太保险。key在前端有显示)

在工作中经常遇到密码明文传输这个问题&#xff0c;为了让密码安全些会让加密&#xff0c;现在有个比较方便的AES加密分享给大家&#xff0c;话不多说&#xff0c;上代码 1&#xff0c;首先引入前端需要用到的js&#xff1a;crypto-js&#xff0c;下载命令 npm install cryp…

vue中computed和watch的使用场景

一、computed computed擅长处理的场景&#xff1a;一个数据受多个数据影响&#xff0c;如果一个属性是由其他属性计算而来的&#xff0c;这个属性依赖其他属性是一个多对一或者一对一&#xff0c;一般用computed&#xff1b; 如果 computed 属性值是函数&#xff0c;那么默认会…

uni-app,vue3接口请求封装

uni-app接口&#xff0c;全局方法封装 1.在根目录创建一个api文件&#xff0c;在api文件夹中创建api.js&#xff0c;baseUrl.js和http.js文件 2. baseUrl.js文件代码 export default "https://XXXX.test03.qcw800.com/api/" 3.http.js文件代码 export function h…

【微信小程序】运行机制和更新机制

&#x1f352;观众老爷们好呀&#xff0c;牛牛又更文了&#xff0c;上文我们对部分比较常用的组件进行了讲解&#xff0c;作为开发者&#xff0c;我们还需要对小程序的运行机制和更新机制做一定的了解&#xff0c;那问题来了&#xff0c;你对它们了解多少呢&#xff1f; &#…

微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

自定义微信小程序头部导航栏 自定义微信小程序头部导航栏&#xff0c;有几种方式 方式一 {"navigationStyle": "custom" // 将navigationStyle从默认default改为custom }定义此方法后&#xff0c;头部的导航栏会去掉&#xff0c;导航栏下的元素会直接向上…

‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序?npm i (npm install)安装不上的原因

启动项目时&#xff0c;本地有node包&#xff0c;但是终端提示&#xff1a;vue-cli-service 不是内部或外部命令&#xff0c;也不是可运行的程序&#xff0c;导致项目无法启动&#xff0c;如下&#xff1a; 原因之一是项目的npm版本较低&#xff0c;但是你本地的npm版本过高&am…

uniapp一键发行代码并混淆代码

第一步.在项目根目录下安装插件 npm install javascript-obfuscator -g安装完成后&#xff0c;javascript-obfuscator就是一个独立的可执行命令了。 javascript-obfuscator -v第二步&#xff1a;HbuilderX点击发行按钮&#xff0c;打包代码到dist文件中 小程序发行后代码会自…

微信小程序--》小程序—全局数据共享和分包

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;微信小程序 &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&…