javascript正则表达式学习

2023-11-17

REGEXP对象
javascript通过内置对象RegExp支持正则表达式
有两种方法实例化RegExp对象
1、字面量

var reg = /\bis\b/;
var reg2 = /\bis\b/g; //正则规则放在//内,\bv表示单词边界,g表示全文搜索,如果没有g则只会修改符合条件的第一个值
var str = 'He is a boy. this is a dog. where is she?'
str.replace(reg, 'IS');//"He IS a boy. this is a dog. where is she?"
str.replace(reg2, 'IS');//"He IS a boy. this IS a dog. where IS she?"

2、构造函数
new RegExp(pattern,attributes)接收两个参数
参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串,包含属性 “g”、“i” 和 “m”

var reg = new RegExp('\\bis\\b');//两个\\第一个表示转义符
var reg = new RegExp('\\bis\\b');
var reg2 = new RegExp('\\bis\\b', 'g');
'He is a boy. this is a dog. where is she?'.replace(reg, 'IS');//"He IS a boy. this is a dog. where is she?"
'He is a boy. this is a dog. where is she?'.replace(reg2, 'IS');//"He IS a boy. this IS a dog. where IS she?"

正则修饰符介绍

g: global全文搜索,不添加,搜到第一个匹配即停止,后面符合条件的不会被替换
i:ignore case 忽略大小写,默认是大小写敏感的
m:multiple lines多行搜索

"He IS a boy. this IS a dog. where is she?".replace(/\bis\b/gi, 'a');//全文搜索且不区分大小写"He a a boy. this a a dog. where a she?"

**

元字符与元义文本字符

**
元义文本字符:原本的字符的意思,比如abc就是指abc
元字符:有特殊含义的非字母字符,比如* + ? $ ^ . | \ () {} []

字符 含义
\t 水平制表符
\v 垂直制表符
\n 换行符
\r 回车符
\0 空字符
\f 换页符
\cX 与X对应的控制字符(ctrl + X)

备注:元字符的含义不是唯一的,在不同的情况有不同的含义,例如^在中括号[]内为取反的意思,在别的地方还有以xxx开始的意思
字符类

'ab\tabc-abd'.replace(/ab\t/, '11'); //一一对应"11abc-abd"
//用[]泛指一个简单的类,有[]中的任何一个都会替换
'a1b2c3d4'.replace(/[abc]/g, 'x'); //包含abc的任何一个都被替换为x,而非将abc替换为x "x1b2c3d4"
//取反
'a1b2c3d4'.replace(/[^abc]/g, 'x');//"axbxcxxx" 不是a或者b或者c的都被替换

范围类
[a-z] 从a到z的任意字符,是一个闭区间,包含a和z本身

'a1b2c3d4'.replace(/[a-z]/g, 'Q');// "Q1Q2Q3Q4"
'a1b2c3d4'.replace(/[a-c]/g, 'Q');//"Q1Q2Q3d4"
'aA1bBCD2c3d4'.replace(/[a-cA-B]/g, 'Q');//小写大写可以连接,如果是这种写法属于范围,不能替换-   "QQ1QQCD2Q3d4"
'2021-03-31'.replace(/[0-9]/g, 'P');//"PPPP-PP-PP"
'2021-03-31'.replace(/[0-9-]/g, 'P');//"PPPPPPPPPP"

**

预定义类

**
预定义类匹配常见的字符
在这里插入图片描述

字符 含义
^ 以xxx开始
$ 以xxx结束
\b 单词边界
\B 非单词边界
'this is a boy'.replace(/is/g, '0');//"th0 0 a boy"不界定单词边界,有is的都被替换包括单词中的字母
'this is a boy'.replace(/\bis\b/g, '0');//"this 0 a boy" 界定单词边界
'this is a boy'.replace(/\Bis\b/g, '0');//"th0 is a boy" 左边为非单词边界,右边为单词边界只有this满足
'@abc@ef@'.replace(/@./g, 'Y');//"YbcYf@"  替换@+任意字符的
'@abc@ef@'.replace(/.@/g, 'Y');//"@abYeY"  替换任意字符+@
'@abc@ef@'.replace(/^@./g, 'Y');//"Ybc@ef@" 替换开头为@
'@abc@ef@'.replace(/.@$/g, 'Y');//"@abc@eY"  替换结尾为@

量词
匹配一个 连续出现 20次 数字的字符串,如果没有量词,则需要连续写20次匹配

字符 含义
出现零次或一次(最多出现1次)
+ 出现一次或多次(至少出现一次)
* 出现零次或多次(任意次)
{n} 出现n次
{n,m} 出现n到m次,包括n和m
{n,} 至少出现n次
var res = /\d{3,6}/;
'12abcdssd'.match(res);//null,数字没有出现3到6次
'12abcds54455sd'.match(res);//["54455"],将至少出现3-6次的数字返回,结果为数组的形式
'1255abcds54455sd'.match(res);// ["1255", "54455"]
'12abcds54455sd'.replace(/\d{3,6}/g,'Q');//"12abcdsQsd"
'123abcds54455sd'.replace(/\d{3,6}/g,'Q');//"QabcdsQsd"

贪婪模式和非贪婪模式

//贪婪模式
'12345678'.replace(/\d{3,6}/g, 'X');//"X78" 按照尽可能多的6匹配,而非3匹配成XX78

非贪婪模式:让正则表达式尽可能少的匹配,也就是说一旦成功匹配不再继续尝试

//非贪婪模式
'12345678'.replace(/\d{3,6}?/g, 'X');//"XX78" 数字字符出现3-6次
'12345678'.match(/\d{3,6}?/g);//["123", "456"]

分组
例如:匹配字符串Byron连续出现3次的场景,如果使用量词

//匹配的为Byron单词中n连续出现3次,而非这个单子连续出现3次
'ByronByronByron'.match(/Byron{3}/);//null
'ByronnnaaaaByronnnbbbb'.match(/Byron{3}/g);(2) ["Byronnn", "Byronnn"]
//分组用小括号()括起来
'ByronByronByron'.match(/(Byron){3}/g);//["ByronByronByron"]
//分组中|或的使用
'tellTitle'.replace(/tell|Title/g, 'Q');//tell或者Title "QQ"
'tellitleAAtelTitle'.replace(/tel(l|T)itle/g, 'Q');//tellitle或telTitle,单词中间一个字母不同,而非两个单子不同 "QAAQ"
//反向引用,分组后可以用$来捕获,第一个分组为$1
//将2015-12-25替换为12/25/2015
'2015-02-15'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$1');//"2015"
'2015-02-15'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2');//"02"
'2015-02-15'.replace(/(\d{4})-(\d{2})-(\d{2})/g,$3);//"undefined"
'2015-02-15'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$3');//"15"
'2015-02-15'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2/$3/$1');//"02/15/2015"
//忽略分组,分组内前面加上问号冒号?:
'2015-02-15'.replace(/(?:\d{4})-(\d{2})-(\d{2})/g,'$1');//"02" 此时第一个分组被忽略,第二个分组编号为$1

前瞻后顾
1、正则表达式从文本头部向尾部开始解析,文本尾部方向,称为“前”(通俗的说,像走路,尾部为未走过的路,所以是前面,头部解析过的为走过的路,为后)
2、前瞻:在正则表达式匹配到规则的时候,向前检查是否符合断言
3、后顾/后占:方向相反
4、javascript不支持后顾
5、符合特定断言称为 肯定/正向 匹配;不符合特定断言称之为 否定/负向 匹配

名称 正则
正向前瞻 exp(?=assert)
负向前瞻 exp(?!assert)
正向后顾 exp(?<=assert) javascript不支持
负向后顾 exp(?<!assert) javascript不支持

exp表示正则条件,括号内为断言部分

//单词字符且单词字符(\w 字母数字下划线)后面为数字,数字为断言部分,不会被替换
'aa22_ab_24'.replace(/\w(?=\d)/g, 'Q');//"aQQ2_abQQ4"
//第一个a虽然是字母,但后面跟的a而非数字不满足断言,所以第一个a不被替换,第二个a满足被替换,第一个2满足数字后面跟数字,所以第一个2也被替换,第一个_后面不是数字不满足断言
'aa22_ab_24'.replace(/\w(?!\d)/g, 'Q');//"Qa2QQQQ_2Q" 断言为不是数字

与正则表达式相关的方法

对象属性:
1、global:是否全文搜索,默认false
2、ignore case:是否大小写敏感,默认false
3、multiline:多行搜索,默认false
4、lastIndex:当前表达式匹配内容的最后一个字符的下一个位置
5、source:正则表达式的文本字符串

//这几个属性是只读的,不能进行设置
var reg1 = /\w/;
var reg2= /\w/gim;
reg1.global;//false
reg1.global;//false
reg1.ignoreCase;//false
reg.multiline;//false
reg2.global;//true
reg2.ignoreCase;//true
reg2.multiline;//true
//不能对这几个属性进行设置,例如
reg1.global = true;
reg1.global;//依然为false

test()方法,RegExp.prototype.test(str)
用于测试字符串参数中是否存在匹配正则表达式模式的字符串,常用语input输入验证

var reg1 = /\w/;
var reg2= /\w/gim;
reg1.test('a');//true
reg1.test('$');//false
//无论执行几次,结果都一样
//但是reg2的结果则有所不同,这是因为lastIndex属性的原因
reg2.test('ab');//true
reg2.test('ab');//true
reg2.test('ab');//false
reg2.test('ab');//true
while(reg2.test('ab')){
   console.log(reg2.lastIndex);// 1 2
}
//因为是全局检测,下次检测记住了上次检测位置,不是每次都从头检测,第一次检测a满足正则表达式,a后面为b所以lastIndex为1,第二次检测b,b后面没有了所以返回false,然后重置为0,所以第四次又变为true
//解决方法,因为test是检测有没有,不管第几次,所以可以不用g标志即可解决
reg1.test('ab');//true

exec()方法,RegExp.prototype.exec(str)
使用正则表达式模式对字符串执行搜索,并将更新全局RegExp对象的属性以反映匹配结果
如果没有匹配的文本返回null,否则返回一个结果数组,数组中有两个属性:
——index 声明匹配文本的第一个字符的位置
——input 存放被检索的字符串 string
非全局调用
调用非全局的RegExp对象的exec()时,返回的数组
1、第一个元素为与正则表达式相匹配的文本
2、第二个是与RegExpObject的第一个子表达式相匹配的文本(如分组,有的话展示,无不展示)
3、第三个是与RegExpObject的第二个子表达式相匹配的文本(如分组,有的话展示,无不展示)

var reg1 = /\d(\w)\d/;
var str= '@1a2bb3c5678';
var ret= reg1.exec(str);
console.log(ret);
 //["1a2", "a", index: 1, input: "@1a2bb3c5678", groups: undefined]
 // 1a2表示与正则表达式相匹配的文本
 // a表示分组的内容
 // index:1  表示匹配的第一个字符,从0开始,1为第二个,所以下标为1
 // input: '@1a2bb3c5678'  被检索的字符串
 var reg2 = /\d(\w)(\w)\d/;//两个分组
 var str2= '@1at2bb3c5678';
 var ret= reg2.exec(str);
 // ["1at2", "a", "t", index: 1, input: "@1at2bb3c5678", groups: undefined]
 //a  t为匹配的分组文本内容
console.log(reg1.lastIndex);//0 非全局g的状态lastIndex是不生效的,没有作用的

全局调用

var reg3 = /\d(\w)\d/g;
var str3= '@1a2bb3c56&8';
// var ret= reg3.exec(str3);
// console.log(reg3.lastIndex, ret);
// var ret= reg3.exec(str3);
// console.log(reg3.lastIndex, ret);
// var ret= reg3.exec(str3);
// console.log(reg3.lastIndex, ret);
// var ret= reg3.exec(str3);
// console.log(reg3.lastIndex, ret);
while( ret= reg3.exec(str3) ){
    console.log(reg3.lastIndex + '\t' + ret.index + '\t' + ret);
    //4	1	1a2,a  1a2后面的b下标为4,1a2的1下标为1,1a2为满足正则条件的文本,a为分组的文本
    //9	6	3c5,c  3c5后面的6下标为9,3c5的3下标为6,3c5为满足正则条件的文本,c为分组的文本
        }

字符串方法
下面的字符串方法也可以用于正则表达式
原理:会将传入的字符串尝试转为正则

'a1b2c3'.search('1');// 1 查找字符串1也可以找到
'a1b2c3'.search(1); // 1 查找数字1也可以找到

1、search方法,String.protatype.search(str/reg)
用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串
返回第一个匹配结果 index(下标),查不到返回-1
search方法不执行全局匹配,它将忽略 g 标志,并且总是从字符串的开始进行检索

var str= 'abdckjj';
str.search('kjj');//4
str.search('qq');//-1
str.search(/j/);//5 只查找第一个j出现的位置
str.search(/\w/);//0  第一个既满足,所以下标为0
str.search(/j/g);//5 会忽略g,依然只返回第一个j出现的位置

2、match方法,String.protatype.match(str/reg)
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置
没有找到则返回null
非全局调用

var str= 'abdckjj';
str.match('jj'); //["jj", index: 5, input: "abdckjj", groups: undefined]
str.match('bd');//["bd", index: 1, input: "abdckjj", groups: undefined]

备注:非全局调用返回结果类似exec方法,区别exec为正则表达式.exec(字符串参数),match为字符串.match(正则表达式参数)

全局调用

var reg4= /\d(\w)\d/g;
var ts = '$1a2b3c4d5e';
ret = ts.match(reg4);
console.log(ret);//["1a2", "3c4"],只返回匹配结果,没有位置也没有分组内容
console.log(ret.index + '\t' + reg4.lastIndex);//undefined	0

3、split方法,String.protatype.split(str/reg)
split() 方法用于把一个字符串分割成字符串数组
也可以传入正则

 'abcdef'.split();//["abcdef"]
 'abcdef'.split('');//["a", "b", "c", "d", "e", "f"]
 'a,b,c,d,e,f'.split(',');//["a", "b", "c", "d", "e", "f"]
 //相当于隐士转换为正则 'a,b,c,d,e,f'.split(/,/);
 'a1b2c3d4'.split(/\d/);//["a", "b", "c", "d", ""]

4、replace方法,String.protatype.replace(str/reg)
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串

'a1b'.replace('1',2);//"a2b"
'a1b1c1d'.replace('1',2);//"a2b1c1d" 只替换了第一个
'a1b1c1d'.replace(/1/g,2);//"a2b2c2d"  替换了所有

String.protatype.replace(reg, function)
function参数含义
function会在每次匹配替换的时候调用,有4个参数,具体参数个数看是否有分组,有几个分组
1、匹配字符串
2、正则表达式分组内容,没有分组则没有该参数
3、匹配项在字符串中的index
4、原字符串

//将字符串中的所有数字都在原有基础上+1
var str1='a1b2c3d4e5';
var x=str1.replace(/\d/g, function (param, index, origin) { 
   console.log(param,index, origin);        
   //param   匹配的字符串
   //index   匹配字符串的下标
   //origin  原字符串
   // console.log(typeof (param-0));
   // return param-0+1;  //利用减法运算也可以将字符串转为number类型 
   return parseInt(param) +1;     
 })
 console.log(x); //a2b3c4d5e6
 console.log(str1);//a1b2c3d4e5 不会修改原字符串 
 var x2 = str1.replace('a1', 'Q');
 console.log(x2);//Qb2c3d4e5
//将a1b2c3d4e5中的bc去掉
var str2 = 'a1b2c3d4e5';
var y = str2.replace(/(\d)(\w)(\d)/g, function(match, group1, group2, group3, index, origin){
  console.log(match, group1, group2, group3);
  return group1 + group3
})    
console.log(y); //a12c34e5
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

javascript正则表达式学习 的相关文章

  • u-input改变输入框内的字体样式

    编辑uview的组件input 由于我的项目背景是蓝色 因此要改变input组件的字体颜色 刚开始我的思路是 直接找到u input组件的class 但是这样设置的话 会导致所有的input内文字都变成我设置的颜色 综合网上的信息 我的处理
  • 刷脸支付也将进一步助力生活生产智能化

    支付宝和微信支付竞相发起 扫货节 和 智慧生活日 活动 不约而同地聚焦刷脸支付 用刷脸支付立减 免单的方式鼓励广大消费者投入刷脸支付的怀抱 毫无疑问 刷脸支付是大数据和人工智能时代的产物 同时 刷脸支付也将进一步助力生活生产智能化 为智慧营
  • 《HTML标签》〈ul〉〈ol〉〈li〉的使用

    li 标签定义和用法 li li 标签定义列表项目 li li 标签可用在有序列表 ol 和无序列表 ul 中 ol 标记 称为有序列表 编号列表标记 其功能是将文字段落向内缩进 并在段落的每个项目前面加上1 2 3 有顺序的数字 ol 标
  • Could not find com.android.support:appcompat-v7:23.1.1 问题解决

    allprojects repositories jcenter maven url https maven google com 添加这个就可以
  • 毛坯装修知识

    硬装指的是装修阶段必须完成的项目 而且一旦完成 很难改动 软装基本就是搬家时能够搬走的那些东西 最简单的区别就是 把屋子倒过来 会掉下来的就是软装 掉不下来的就是硬装 家具电器 窗帘布艺 装饰挂画等等都算软装 插座 门 地板瓷砖这些 更换起
  • 融合零样本学习和小样本学习的弱监督学习方法综述

    融合零样本学习和小样本学习的弱监督学习方法综述 人工智能技术与咨询 来源 系统工程与电子技术 作者潘崇煜等 摘 要 深度学习模型严重依赖于大量人工标注的数据 使得其在数据缺乏的特殊领域内应用严重受限 面对数据缺乏等现实挑战 很多学者针对数据

随机推荐

  • 小程序之坑---input自动获取焦点

    项目 taro3 vue3 taro ui vue3 方法一 taro ui vue3的input组件的autoFocus focus无效 方法二 原生input组件的auto focus在这个环境下也无效 但是在原生项目中有效 方法三 通
  • js里document的用法

    document write 动态向页面写入内容 document createElement Tag 创建一个html标签对象 document getElementById ID 获得指定ID值的对象 document getEleme
  • mysql 两个时间相减返回年、月、日、时、分、秒

    select timestampdiff 变量 开始时间 结束时间 变量 year 年 month 月 day 天 hour 小时 minute 分钟 second 秒 例如
  • 由Vite读音引发的英语颠覆

    前段时间出了个项目Vite 被读成va t 结果后面发现是读vi t 后面又引出了height的读音 我们有些人读he t 有些人读ha t 结果是读ha t 我也是读了20年的he t 因为有个weight是读we t的 所以想当然的以为
  • 对象和字符串之间的相互转换

    原文链接 对象和字符串之间的相互转换 编程屋 相关依赖
  • Python——12306图片验证码

    本次爬虫 我们来模拟一下12306的验证码验证 本次练习用到的模块 requests re base64 urllib3 第一步 按F12查看验证码图片的信息 提取URL https kyfw 12306 cn passport captc
  • 前端页面之间url传参

    function getUrlParam name var reg new RegExp name var r window location search substr 1 match reg ECMAScript v3 已从标准中删除了
  • 如何设置office2003为默认打开方式

    如何设置office2003为默认打开方式 当系统同时安装 office 2003和 office 2007 或2010 两个版本的 office办公软件的时候 双击打开一个office文档 Word Excel Powerpoint 默认
  • 【CV with Pytorch】第 10 章 :计算机视觉的可解释人工智能

    大多数机器学习和深度学习模型都缺乏解释和解释结果的方法 由于深度学习模型的动态特性和不断增加的最先进模型 当前的模型评估基于准确度分数 这使得机器学习和深度学习成为黑盒模型 这导致对应用模型缺乏信心 对生成的结果缺乏信任 有多个库可以帮助我
  • 刷题统计(蓝桥杯)

    刷题统计 问题描述 小明决定从下周一开始努力刷题准备蓝桥杯竞赛 他计划周一至周五每天 做 a 道题目 周六和周日每天做 b 道题目 请你帮小明计算 按照计划他将在 第几天实现做题数大于等于 n 题 输入格式 输入一行包含三个整数 a b 和
  • 数据结构基础:2.顺序表。

    顺序表的介绍和实现 一 线性表 1 基本概念 二 顺序表 1 基本概念 分类 1 静态顺序表 分类 2 动态顺序表 2 动态顺序表的功能接口的实现 0 顺序表打印 1 初始化和删除 2 尾插尾删 3 头插头删 4 任意位置插入删除 5 查找
  • 面试题 01.08. 零矩阵

    难度中等 编写一种算法 若M N矩阵中某个元素为0 则将其所在的行与列清零 示例 1 输入 1 1 1 1 0 1 1 1 1 输出 1 0 1 0 0 0 1 0 1 示例 2 输入 0 1 2 0 3 4 5 2 1 3 1 5 输出
  • 并发编程相关面试题(持续更新)

    1 juc包提供了哪些工具 用在什么场景 1 提供了比 synchronized 更加高级的各种同步结构 包括 CountDownLatch CyclicBarrier Semaphore 等 场景 可以实现更加丰富的多线程操作 比如利用
  • TTL反相器、OC门、TS门、推挽输出、开漏输出

    TTL反相器 这是一个TTL反相器 这是经过了很多工程师多种设计最终沉淀出来的电路 这个电路是比较成熟的 我们只需要对这个电路进行解析即可 不需要再去研究当初是如何设计出来的 学过CMOS应该知道 右侧的输出级其实也是个推挽输出 因为长得像
  • 记录一次小问题!ssh脚本打包vue 执行 cnpm run build 无法继续向下走

    问题 ssh脚本打包vue 执行 cnpm run build 无法继续向下走 发现一直停留在 DONE Build complete The dist directory is ready to be deployed INFO Chec
  • JS内存泄漏排查

    定义 内存泄漏 应用程序不再需要的内存 由于某种原因 内存没有返回到操作系统或可用内存池中 原因 1 意外的全局变量 JS 在处理未声明的变量时 对未声明的变量的引用会在全局对象内创建一个新变量 这些全局变量是无法进行垃圾回收的 除非将它们
  • 东方财富四千余支股票2023年度上半年收盘价格走势涨跌可视化分析

    本文数据和图表内容仅供参考 数据仅供参考 数据仅供参考 数据仅供参考 如下是案例A300028的股票2023年收盘价走势及涨跌幅曲线 案例 A股300024 案例 600182走势图 走势分析图谱 原始结果已保存到压缩文件 通过python
  • Python+Selenium练习篇之18-自定义浏览器窗口大小

    本文来学习下如何通过Selenium方法 设置符合不同测试场景浏览器窗口大小 例如 你有一台机器 最大支持1366 768 你完全可以利用这个机器测试不同分辨率下的场景 相关测试脚本代码如下 coding utf 8 import time
  • 区块链技术的应用和数字资产,将会是未来不可阻挡的趋势和潮流

    前言 数字资产的发展 很可能是人类近千年金融史上又一次激动人心的变革 如果让你回到七年前重新选择一次投资机会的话 你可能会选择投资股票 然后坐等15年大牛市资产翻几倍 你也可能会投资房地产 然后坐等16年房地产爆发 资产翻番 但你万万想不到
  • javascript正则表达式学习

    REGEXP对象 javascript通过内置对象RegExp支持正则表达式 有两种方法实例化RegExp对象 1 字面量 var reg bis b var reg2 bis b g 正则规则放在 内 bv表示单词边界 g表示全文搜索 如