当前位置: 首页 > Web前端 > HTML

前端正则表达式详解

时间:2023-03-28 18:30:00 HTML

正则表达式的定义正则表达式,由普通字符、元字符和修饰符组成,描述了一种用于字符串匹配的模式模式,通常用于检索、检索和替换那些匹配文本的模式。Symbol普通字符字符含义[abc][A-Z]匹配括号内的任意字符[^abc]匹配任何不在括号内的字符\d匹配数字字符,相当于[0-9]\w匹配字母、数字、下划线,相当于[A-Za-z0-9_]\b匹配字边界\s匹配不可见字符,相当于[\f\n\r\t\v]\f\n\r\t\v匹配pagefeed,linefeed、回车、制表符、垂直制表符可以用\D表示来否定\d,其余同理。这里需要注意的是,[^]取反只对任意一个字符有效。如果要匹配非LAL、非LAC等多个字符,则不能使用[^LAL|LAC]来表达,只能使用否定断言(?!LAL)(?!LAC)。元字符元字符是具有特殊含义的字符。简单的说就是在匹配的时候需要在它们前面加一个\转义字符。字义。匹配非换行符,相当于[^\n\r]^匹配表达式的起始位置$匹配表达式的结束位置|匹配左边或右边的()[]{}部分元字符*+?也是限定词,将在限定词中解释。限定符限定符用于指定匹配正则表达式的特定模式的次数。字符含义*匹配0次或多次,相当于{0,}+匹配1次或多次,相当于{1,}?匹配0次或1次,相当于{0,1}{n}匹配n次{n,}至少匹配n次{n,m}至少匹配n次,最多匹配m次。限定符是贪婪的,会匹配尽可能多的。可能比赛很少。'123'.match(/\d{1,2}/g);//['1','23']'123'.match(/\d{1,2}?/g);//['1','2','3']使用括号()获取匹配以分组捕获模式,使用$1...$9可以获取多个获取的匹配。/(\w+)\s(\w+)/.test('棕熊');console.log(RegExp.$1);//Brownconsole.log(RegExp.$2);//BearbackreferencereverseQuoting允许在正则表达式中从外到内、从左到右引用先前分组的捕获文本。字符含义\numnum表示引用组的编号//检查日期格式/\d{4}([/\-.])\d{2}\1\d{2}/.test('1990/08/02')//检查配对标签/<(\w+)>.*?<\/\1>/.test('bear')非获取匹配字符不需要要获取这组内容时,可以使用非获取匹配器来实现。字符含义(?:pattern)(?=pattern)断言,预检匹配模式的否定断言(?!pattern),预检/Bear(?=082)/.test('Bear082')//不匹配模式true/Bear(?=082)/.test('Bear0802')//false/Bear(?!082)/.test('Bear082')//false/Bear(?!082)/.test('Bear0802')//true这里需要注意的是JavaScript不支持反向断言(?不会被babel或polyfill改造,所以需要谨慎使用(个人建议暂时已弃用)。//在Safari//SyntaxError:无效的正则表达式:无效的组说明符nameconstvideoUrl='http://play.tuhu.org/tuhulive/THMKT175B6074B01.m3u8?txSecret=&txTime=';constvideoId=videoUrl.match(/(?<=tuhulive\/)\w+/)?.[0];↓↓↓↓↓↓//更好兼容的选择constvideoId=videoUrl.match(/tuhulive\/(\w+)/)?。[1];修饰符修饰符用于在正则表达式之外指定额外的匹配策略。/pattern/flags修饰符含义instancei忽略大小写'Bear'.match(/bear/i)g全局匹配'bearbear'.match(/bear/g)m多行匹配,使边界字符^和$匹配每个'bear\nbear'.match(/^bear/gm)s行(ES2018新增)允许.在修饰符出现前匹配换行\n\r'bear\nbear'.match(/bear./s)s一般用[\s\S]来替换匹配任意字符。ES的新特性还增加了u和y修饰符。由于使用场景比较少,这里就不多介绍了。属性sourcesource属性返回当前正则表达式的字符串,该字符串不包含两边的斜线和任何标志字符。constreg=/bear/g;reg.source;//著名的underscore和lodash_.template方法的源码中有这样一段经典代码:exportdefault_.templateSettings={evaluate:/<%([\s\S]+?)%>/g,插值:/<%=([\s\S]+?)%>/g,转义:/<%-([\s\S]+?)%>/g};varmatcher=RegExp([(settings.escape||noMatch).source,(settings.interpolate||noMatch).source,(settings.evaluate||noMatch).source].join('|')+'|$','G');评估对应于表达式<%console.log('Bear');%>interpolate对应插入的值<%=value%>escape对应转义值<%-value%>when需要将这三种正则表达式合二为一,使它们都匹配时,巧妙使用源代码可以帮助代码更加简洁易懂。lastIndexlastIndex属性是一个可读可写的整数,用于指定下一次匹配的起始索引。需要注意的是,该属性有两个限制:只有test和exec方法有效,只有g或y修饰符有效,其余始终为0示例:constreg=/bear/g;console.log(reg.test('熊'));//trueconsole.log(reg.test('bear'));//false原因很简单,执行第一个测试方法时,lastIndex设置为4,第二次是从位置4开始,也就是字符串tail作为起始索引开始检测,所以匹配不到.String.prototypereplacematch方法返回一个字符串匹配正则表达式的结果,类似于exec但没有那么强大。split将字符串拆分成字符串数组search返回搜索匹配的索引鉴于replace的频繁使用及其强大的功能,这里额外花点时间解释一下。参数含义regexp|substr被正则表达式匹配到的要替换的文本或字符串,字符串格式只替换第一个匹配newSubStr|函数用于替换字符串值或生成替换文本$字符替换函数使用的字符串newSubStr中有特定的含义:字符含义$$$$&匹配文本$`匹配文本左边的文本$'匹配文本右边的文本$1...$99matches的第1到第99个捕获的文本,如果该组不存在,则字面值'BrownBear'.replace(/(\w+)\s(\w+)/,'$2$1');//'棕熊''棕熊'.replace(/(\w+)\s(\w+)/,'$3$2$1');//'$3BearBrown'RegExp.prototypetest看正则表达式是否匹配指定字符串匹配,返回true或falseexec在指定字符串中执行搜索匹配,返回结果数组或nullcommoncasephonenumberencryption'13012345678'.replace(/(\d{3})\d{4}/,'$1****');前端加密是骗人的,应该在不同的场合使用。不要因为学会了就假装是X(我来做!一行正则可以做!)。千位分隔符'12345678'.replace(/(\d{1,3})(?=(\d{3})+$)/g,'$&,');其实还有一个更高的上面的实现方法:(12345678).toLocaleString();有细心的同学可能会问,如果分隔符是.,这个方法还能用吗?答案当然是第一个参数arealocales就可以支持,这里就不多说了。验证密码复杂度//要求密码必须包含大小写字母,数字,最少8个字符最多16个字符/^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])).{8,16}$/.test('Bear0802');可视化工具https://tooltt.com/regulex/支持正则可视化,支持导出为图片,方便分享和留存结语正则表达式需要很强的基本功作为支撑,想要吃透并不容易。当你真正使用它们时,不要忙于机械地复制它们。列出所有场景,并结合可视化工具编写满足您需求的正则表达式。