2020/06/20 - 补充:vue2.0+模板编译正则部分。
2020/06/29 - 补充:删除标签字符串中的指定标签 。
2021/04/30 - 补充:lastIndex属性 和 圆形方法exec( )
基础
修饰符
(在双斜线后边的字符):
i 忽略大小写 (例:test可匹配到Test、TEST、tEST等等)。
g 全局匹配(符合贪婪匹配原则 - 尽可能匹配多个)
m 换行匹配( 对获取textarea元素的值很有用 )
字符集 - 方括号
关键字:范围、单个
(查找某个范围内的字符 - 匹配出来的是单个字符):
[abc] 匹配在方括号中的字符,可以匹配a或b或c
[^abc] 匹配除了方括号中的任何字符,匹配 除 a或b或c的字符
[0-9A-z] 匹配数字0到9 或 英文字母(大小写都行)中的任何字符
tips:
(1)方括号只能匹配指定区间内的单个字符,匹配到的结果会组成一个数组;
(2)^ 在方括号中是取反的意思 ,与js中的!相同。
// 匹配除2或1或3的 const time = ' 32020' const r = /[^213]/g let res = time.match(r) // [ '0', '0' ]
括号
关键词:分组、或、捕获
() 分组匹配,匹配的是一个整体,可匹配多个字符,就是如果要匹配abc,只有abc连在一起的才能匹配到。
tips:
(1)与方括号不同,圆括号是匹配一个整体;
(2)圆括号内优先运算
(3)圆括号里边可以写 | 表示 或,与js中的 || 功能一样
const time = 'abcfabhbc' const r = /(abc|ab)/g let res = time.match(r) // [ 'abc', 'ab' ]
(4)$1、··· ···
$1、$2、$3、$4 ··· ··· 匹配的是前边的分组( 相当于复制了一份前边的组(也就是括号里边匹配的内容) )
下边是分组匹配很经典的例子,电话号中间星号展示:
// 参数一是第一个括号的内容,参数二是第二个括号的内容,中间所匹配的内容会被星号替换 const time = '13181006100' const r = /(\d{3})\d{4}(\d+)/g let res = time.replace(r, '$1****$2') // '131****6100'
(5)反向引用
先解释下:所谓反向引用相当于复制了一份前边小括号中匹配的内容。。。
在 《 javaScript 忍者秘籍第二版 》中解释:
正则表达式中最复杂的术语是反向引用,反向引用可引用正则中定义的捕获。
反向引用子表达式(子表达式就是括号中的内容)的内容 \1 \2 \3 ··· ···
\1 会反向引用(复制)第一个括号匹配的内容
\2 会反向引用(复制)第二个括号匹配的内容
\3 会反向引用(复制)第三个括号匹配的内容
依次类推 ··· ···
// \1 只会引用 ([0-9]),所以 0还会被赋值一份 -> 020 let str = '020' let reg = /([0-9])2\1/g console.log(str.match(reg))
*** 反向引用时,前边必须是一个分组(括号)的格式 ***
// \1 会引用(就是复制而已)第一个子表达式 (\w) 里边的内容, 第一次:匹配a,在复制一次, // 组成aa,然后判断aa是否符合字符串,符合则aa被匹配,;第二次匹配与第一次一样。 const s = 'aaaa' const reg = /(\w)\1/g const r = s.match(reg) // ['aa', 'aa']
const s = 'aabb' const reg = /(\w)\1(\w)\2/g // \1 反向引用第一个子表达式里边的内容, \2 反向引用第二个子表达式内容 const r = s.match(reg) // ['aabb']
匹配标签, 使用 反向引用 可以非常方便匹配某个标签 :
let str = '<div>123</div>' let reg = /<(\w+)>(.+)<\/\1>/ console.log(str.match(reg))
(6)正向预查
?=n
可以把等号后边跟着n的 前边的字符匹配出来(匹配的是问号前边的字符)
let reg = /(?=(abc))/g let s = 'abc' console.log(s.match(reg)) // ['']
const s = 'aaabaa' const reg = /\w(?=b)/g const r = s.match(reg) //匹配出a后边跟着b的a ['a']
元字符
( 1 ) 点字符
. 匹配到单个字符,除了换行(\n)、回车(\r)、行分隔符(\u2028)和段分隔符(\u2029)( 不需要符合前边的规则,也就是除了换行和结束符都可以匹配出来 )
const time = 'a1bcf' const r = /(\w.)/g let res = time.match(r) // [ 'a1', 'bc' ]
\w\W 匹配单词字符和非单词字符( 所谓的单词字符包含:大小写字母、数字、下划线 等于 \w )
\d\D 匹配数字 - 等价于[0-9] 和 非数字字符 - 等价于[^0-9]
\s\S 匹配空白字符和非空白字符
字符边界情况:
\b\B 匹配单词的边界 和 非单词边界(也就是单词内部),如:
可匹配最左边 和 最右边
const time = '1abcf2' const r = /(\b)/g let res = time.match(r) // [ '', '' ]
\n \f \r \t \v 匹配换行符、换页符、回车符、制表符、垂直制表符(这些不太常用)
[\u4e00-\u9fa5] 匹配汉字
量词
**(必须要符合前边的规则才能匹配到!假如前边规则是一个数字,后边匹配到的所有字符必须是数字才行)
n* 匹配0个或多个字符
补充:
n* 匹配0个多个,这句话在正常模式中(贪婪模式)一点毛病都没有,所以你会发现使用*后空字符也会被匹配到,贪婪模式下,会尽可能多匹配,而 星号 * 会匹配0个或多个,所以最后0个(空字符)也被匹配到了 :
let str = "abc8-def.ghi" let reg = /[a-zA-Z_\-.0-9]*/g let rr = str.match(reg) console.log(rr)
在vue2.0+源码中,模板编译匹配标签中的属性,属性首个字符必须是大写或小写字母或下划线。
const ncname = /[a-zA-Z_][\-\.0-9_a-zA-Z]*/;
+ 匹配1个或n个字符,优先匹配n个字符,相当于 {1,}
? 匹配0个或1个字符,优先匹配1个,相当于 {0,1}
{ n } 匹配n个
{x, y} 匹配x到y个字符
const time = '2bc1l1v5' const r = /[A-z]+/g let res = time.match(r) // [ 'bc', 'l', 'v' ]
const time = '2bc1l1v5' const r = /\d+/g let res = time.match(r) // [ '2', '1', '1', '5' ]
const time = '2bc1l15' const r = /\w{2}/g let res = time.match(r) // [ '2b', 'c1', 'l1' ]
// 贪婪匹配典型的例子,匹配的数量是1到5,在满足前边规则的情况下, // 它会尽可能多的去匹配,下边它会先尝试匹配5个字符,最后没有那么多字符了 // 在去匹配剩下的字符。 const time = '2bc1l15' const r = /\w{1,5}/g let res = time.match(r) // [ '2bc1l', '15' ]
n$ 匹配以n结尾的字符(在说一遍:必须要符合n的规则,且匹配的是一个整体),比如:
let reg = /(abc)$/g let s = 'abcc' let ss = 'abc' console.log(ss.match(reg)) // ['abc'] console.log(s.match(reg)) // null
^n 匹配以n开头的字符
注意:
(1)正则默认为贪婪模式,凡是表示范围区间的量词,都优先匹配上限,而不是下限。如:
let reg = /a{1,4}/g
let s = 'aaaa'
console.log(s.match(reg)) // ["aaaa"]
(2)有时候这不是我们想要的结果,可以在量词后边加上 ? , 可开启非贪婪模式。
这里说下,下边匹配的模式是 - 非贪婪模式,之所以匹配4个 单独的 “a” , 因为加了全局匹配 g。。。
let reg = /a{1,4}?/g
let s = 'aaaa'
console.log(s.match(reg)) // ["a", "a", "a", "a"]
下边案例类似:
非贪婪模式下,会尽可能少匹配,* 匹配0个或 多个,所以会匹配到4个空字符。
let str = 'aaa'
let reg = /a*?/g
console.log(str.match(reg)) // ['', '', '', '']
补充
?: 阻止分组捕获,只匹配不捕获(小括号匹配的内容不会被捕获到)
解释下:
在正则捕获的时候,如果正则存在分组(小括号),捕获的时候不仅仅会把大正则匹配到的字符捕获到(数组第一项),而且把小分组匹配的内容也单独抽取出来(数组第二项,也就是小括号匹配的内容)
let str = 'l{2020}x{2021}c{2022}' let reg = /\{(\d+)\}/ let r = str.match(reg) /** [ '{2020}', // 大正则匹配的内容,也就是\{(\d+)\} 匹配的内容 '2020', // 分组匹配的内容,也就是 (\d+) 匹配的内容 index: 1, input: 'l{2020}x{2021}c{2022}', groups: undefined ] */
当加上 ?: 时,分组匹配的内容不会被单独捕获到:
let str = 'l{2020}x{2021}c{2022}' let reg = /\{(?:\d+)\}/ let r = str.match(reg) /** [ '{2020}', index: 1, input: 'l{2020}x{2021}c{2022}', groups: undefined ] */
《javascript忍者之秘籍》中的小例子:
这个题有点意思,加上阻止捕获之后,反向引用将不会引用第一个分组, 会去引用下一个分组!
let str = 'ninja-trick-trick' let reg = /(?:ninja)-(trick)?-\1/g console.log(str.match(reg)) // ["ninja-trick-trick"]
test() 方法
let reg = /\w+/g let s = 'abc' let r = reg.test(s) console.log(r)
补充:
lastIndex
使用字面量创建正则表达式时,如果不加g全局匹配,它只会匹配一次,但是如果加了g之后,会把字符串中所有匹配项都匹配出来。
由test方法引出lastIndex属性,在加全局匹配之后,来看一个似乎非常奇怪的现象:
let reg = /ab/g;
let str = 'abab';
console.log(reg.test(str)) // true
console.log(reg.test(str)) // true
console.log(reg.test(str)) // false
console.log(reg.test(str)) // true
为什么会有这样的结果呢,先来正常分析下,第一次匹配会匹配前两个,返回true;第二次匹配会匹配后两个,返回true,当第三次匹配时字符串已经没有匹配项了,所以返回false,都很正常,但是第四次匹配时,又是true,什么原因?正是lastIndex搞的鬼。
在全局匹配时,正则中会有一个属性lastIndex,我理解的意思是:每次匹配完下一次匹配索引位的记录,可以把lastIndex理解为一个移动指针;
未匹配之前lastIndex为0,开始匹配,如果匹配到结果,lastIndex为匹配结果的最后一个字符的下一个字符的索引位(也就是下一次开始搜索的起始位),可能文字表述起来很抽象,下边画图解释:
也可以修改lastIndex属性。
字符串方法:
replace() 方法
参数二是一个回调函数,对匹配的内容进行处理,回调函数 - 参数一:大正则匹配的内容;参数二:分组匹配的内容
let str = 'l{2020}x{2021}c{2022}' let reg = /\{(\d+)\}/g let r = str.replace(reg, function(a, b) { console.log('1', a) // {2020} {2021} {2022} console.log('2', b) // 2020 2021 2022 })
补充:
replace参数二也可以是一个字符串:
下边 replace 中参数二 '$s1' 匹配出的是前边分组, 所以最后结果:会把前边分组匹配的内容 返回。
// 匹配出 './user.js' 或 './b.js' 中的文件名 const s = './user.js' const reg = /^\.\/(.*)\.js$/ let fileName = s.replace(reg, '$1') // user
match() 方法
返回值:如果匹配成功,返回的是一个数组,其中存放匹配的结果。如果未找到,则返回值为null。
注意:如果正则中有g,则该方法与正则对应的exec方法行为不同,会一次性返回所有的匹配结果。
const reg = /(foo|a)/g; const str = 'table football, foosball'; console.log('匹配的结果:', str.match(reg))
exec() 方法
返回值:匹配到结果,返回一个数组,否则返回null
数组参数:
第一项:整个匹配成功的结果;后边的成员就是圆括号对应的匹配成功的组。也就是说,第二成员对应第一个括号,第三个成员对应第二个括号,以此类推。
index:每次匹配成功的起始索引,从0开始;
input:整个原字符串;
let reg = /(ab)ab/g; let str = 'abab'; console.log(reg.exec(str)) // ["abab", "ab", index: 0, input: "abab", groups: undefined] console.log(reg.lastIndex) // 4
利用g修饰符允许多次匹配的特点,可以用一个循环,完成全部匹配,下面代码中,只要
exec()
方法不返回null
,就会一直循环下去,每次输出匹配的位置和匹配的文本:let reg = /a/g; let str = 'ababaa'; let res; while(res = reg.exec(str)) { console.log('res', res) console.log('lastIndex:', reg.lastIndex) }
总结:
在正则设置了g的情况下,捕获的内容只有大正则匹配的内容,小分组(小括号)匹配的内容不会被单独抽离出来。
小例子:
// 把下边 字符串转化为:04/09 17:55 let str = '2020/04/09 17:55:20' // 加了?: 表示匹配不捕获 ["2020", "04", "09", "17", "55", "20"] // 如果不加?: ["2020", "/", "4", "/", "09", " ", "17", ":", "55", ":", "20"] let reg = str.split(/(?:\/| |:)/) let [,month, date, hours, minutes] = reg let r = `${month}/${date} ${hours}:${minutes}` // '04/09 17:55'
补充:
正则创建
两种方法:
(1)字面量
(2)使用new RegExp
RegExp 是一个全局函数,可以用来创建动态正则,在实际开发中非常有用!!!
有一些属性:
常用属性:
· $_ // 上一次匹配的字符串
· $1、$2、$3、$4 ··· ··· // 上一次匹配的捕获分组
eg:
let reg = /\w+/g
let s = 'abc'
let r = s.match(reg)
console.log(RegExp.$_)
添加修饰符:
在字面量末尾添加修饰符(如/test/ig)
RegExp构造函数(newRegExp("test", "ig"))
小案例:
0、解释下边正则
// 匹配1 或者 2到6之间 或者 5
let reg = /[12-65]/g
1、去掉中横线和空白字符
const time = '2020-03-03'
const r = /[-\s]*/g
let res = time.replace(r, '') // '20200303'
2、匹配 汉字
const text = '吕星辰'
const r = /[\u4e00-\u9fa5]+/g // [] 某个范围内的字符 +匹配至少一个前边的字符
const res = text.match(r) // ['吕星辰']
3、检查字符串首或尾是否含有整数数字 / 首和尾是否含有整数数字
const s = '-1abc1'
const reg = /(^-?\d|\d$)/g // 字符串首或尾是否含有数字
const reg = /^-?\d[\w\W]*\d$/gi // 字符串首且尾是否含有数字
4、把字符串中的中横线去掉,且首字母大写
const s = 'the-first-name-age'
const reg = /-(\w)/g
const r = s.replace(reg, ($, $1) => {
console.log($, $1) // $:匹配的字符 -n -a; $1: 匹配的子表达式的内容n a
return $1.toUpperCase() // theFirstNameAge
})
5、字符串去重
// \1 相当于复制了一个前边的\w, 加上+等于尽可能匹配多个\1, 使用$1相当于 (\w)
const s = 'aaaaaaaaabbbbcccccc'
const reg = /(\w)\1+/g
const r = s.replace(reg, '$1') // ['abc']
6、 从后往前匹配
// 它会从后往前3个3个的匹配
const s = '1000000'
const reg = /(\d{3})+$/g
const r = s.match(reg) // ['000000']
// 下边是从前往后3个3个的匹配,会发现少了一个0
const s = '1000000'
const reg = /(\d{3})+/g
const r = s.match(reg) // ['100000']
7、给一个数表示成千分制,比如: 1000000 表示成:1,000,000
这个题貌似是百度(腾讯)面试题:
// 分析下:此题一定要从后往前3个3个匹配,(\d{3})+$) -> 实现从后往前以3个为一组匹配多个
// 前边加上 ?= 表示匹配出每一组前边的空字符,因为问号前边啥都没有,所以匹配出来的肯定为空字符
// 到这功能就能实现了,但是有个bug,如果正好6位数,1前边也会有逗号,所以,加一个\B,排、除边缘匹配的情况 (也就是边界不匹配,匹配的是非边界)
const s = '1000000'
const reg = /(?=(\B)(\d{3})+$)/g
const r = s.replace(reg, ',') // 1,000,000
匹配空字符:
下边?=0的意思为:匹配出后边跟着0的空字符
const s = '1000'
const reg = /(?=0)/g
const r = s.match(reg) // [ '', '', '' ]
8、以4个数字为一组,以空格隔开,跟上面功能类似
const s = '370000000222200'
const reg = /(?=(\B)(\d{4})+$)/g
const r = s.replace(reg, ' ') // '370 0000 0022 2200'
9、去除html标签
const str = '<div><span></span>123</div>'
const res = str.replace(/<[^>]+>/gi, '')
console.log(res) // 123
10、数字区间的匹配
匹配18~65之间的数字
看到这种需求,很简单,把数字拆分:
18到19做一个区间,20到59做一个区间,60到65做一个区间即可:
// 年龄18~65之间
let reg = /(^1[8-9]$|^[2-5]\d$|^6[0-5]$)/g
11、匹配身份证
解析:
身份证前6位代表:地域
后8位代表:出生年月日
最后4位代表:生成的有规律的数,其中倒数第二位 奇数表示:男,偶数表示:女
let reg = /(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|X)/
12、匹配有效的数字:
包含:正整数、负数、零、小数、整数(比如:-12.33、-12、12.111、0、+2、-2、+0、-0)
以下是非法的:02.3、.5、6. 、02
// 有效的数字
// 以-号或+号开头,0到1个,一个数字或者多个数字时必须以1开头,小数点可有可无,
// 如果有小数点,后边必须跟着数字,最后以数字结尾
let reg = /^[-+]?(\d|([1-9]\d+))(\.\d+)?$/g
13、邮箱匹配
邮箱规则:
xxx@xxx.xx 分为3部分
第一部分:数字、字母、下划线、-、. 但是 - 和 . 不能作为开头,也不能连续出现-或者.
第二部分:xxx.xx.xx 或 xxx.xx 或 xxx.xx.xx.xx 或 xxx-xxx-xx.xx.xx
第三部分:字母或数字
const reg = /^\w+([-.]\w+)*@[A-z0-9]+([-.][A-z0-9]+)*(\.[A-z0-9]+)$/g
14、匹配标签且删除
网上很多人问怎么用正则匹配标签,其实很简单,但是有细节:
如:把下边 <div class="flag"> <span>123</span> </div> 标签去掉
<div class="wrapper">
<div class="box">box
<div class="content">content</div>
<div class="flag">
<span>123</span>
</div>
<div>12321</div>
</div>
<div class="box">box
<div class="content">content</div>
<div class="flag">
<span>123</span>
</div>
<div>12321</div>
</div>
</div>
<script>
let d = document.getElementsByClassName('wrapper')[0]
const r = d.innerHTML // 全部选出来
// 正则匹配字符串,空白/非空白字符选中任何字符,* 0个或多个, ? 取消贪婪
// (也就是尽可能少匹配,默认是贪婪匹配),如果不加 ? ,后边<div>12321</div>
// 也会被匹配到
let reg = /\<div class="flag">[\s\S]*?\<\/div>/ig
let re = r.replace(reg, '')
d.innerHTML = re
</script>
15、《javaScript忍者秘籍第二版》中的例子:
获取指定class类名的标签
分析:
该正则表达式匹配字符串开始或空格,接着是指定的class名称,最后以空格或字符串结束。注意在正则\\s中双反斜线(\\)的使用。当使用反斜线创建正则表达式字面量时,只需使用一个反斜线。但是由于在字符串中写反斜线,必须使用双反斜线进行转义。这很烦琐,但是,需要意识到我们是使用字符串构建正则表达式,而不是直接使用字面量。
<div id="div1">
<div class="d">1</div>
<div class="d1">2</div>
<div class="d">3</div>
</div>
<script>
function findClassInElement(ele, classN) {
const el = document.getElementsByTagName(ele || '*')
let reg = new RegExp('(^|\\s)' + classN + '($|\\s)')
let result = []
for (let i = 0; i < el.length; i ++) {
if (reg.test(el[i].className)) { // 检查每个标签的className
result.push(el[i])
}
}
return result
}
const r = findClassInElement('div', 'd')
</script>
16、vue2.0 + 源码中的 匹配标签属性正则分析:
首先要明白标签属性什么样:<div name="aliasName"> , name="aliasName"就是标签属性。
看这种正则,先要从大局出发,大的分组有2个,一个是:([^\s"'<>\/=]+),一个是:(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))
^\s* 开始时以空白字符开头0个或多个,
([^\s"'<>\/=]+) 是第一个分组 - 匹配除空白字符、单双引号、左右尖角号、斜杠、等号一切一个或多个字符,这个是匹配属性的,
(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+))) 第二个大分组,这个是匹配属性后边的等号和等号后边的属性值,匹配不捕获,匹配空白字符0次或多次(我一般会以匹配0个或多个称呼),也就是说等号前边可以有空白字符,(=)匹配等号,等号后边也可以有空白字符,(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)) 这块就很简单了,匹配属性值,属性值可以被单、双引号包起来,或者匹配除空白字符、单双引号、左右尖角号、反撇号、等号一切字符,可匹配一次或多次。
let reg = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/g
17、匹配花括号及里边内容
(?:.|\r?\n) 这个小分组前边加了?: 表示匹配不捕获
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g
18、去除标签字符串中的指定标签
这段时间一直在研究正则,网上询问这种需求的小伙伴也很多,却没有一个完美的解决答案,多数都是复制粘贴,或者解决不了实际需求,于是自己写了一个!
与上边序号为14的小例子一样,只不过下边写法解决问题范围更广一些,只需要传一个字符串,和想要删除标签的唯一标识即可:
注: 下边方法不适用于 :
1、id和class同时存在
<div id="aaa" class="a flag main-container"></div>
除上述方式以外,其他情况均适用,也欢迎各位大佬来 "找茬"。
function delMarkTag(template, flag) {
let vueDataAttr = `([\\w\\-]+\\s*(=)\\s*(""|'')\\s+)*`
let p = `[\\w\\s\\-]*`
let classAttr = `(class|id)=(?:"(${p}${flag}${p})"|'(${p}${flag}${p})')[^>]*`
let tagContent = `[\\w\\W]*?`
let reg = new RegExp(`<([a-zA-Z]+)\\s+?${vueDataAttr}${classAttr}>${tagContent}<\\/\\1>`, 'ig')
return template.replace(reg, '')
}
eg:
只要标签中的class类名有flag的都删除掉:
<div class="box">
<div class="a flag b"></div>
<div class="a flag b"></div>
<div data-v-n456n56 class="d">
<div data-v-13877386 class="a flag main-container"></div>
<div class="cc"></div>
<div class="flag gg"></div>
<div data-v-fdsfdfd class="a flag main-container"></div>
<div class=" flag "></div>
</div>
</div>
<scrpit>
let div = document.getElementsByClassName('box')[0]
let t = div.outerHTML
let keyWords = 'flag'
let o = delMarkTag(t, keyWords) // delMarkTag函数在上边
console.log(o)
</script>
结果:
小例子不断增加中··· ···