JS( 三 )


3.5_量词()
假设有一个字符串 +7(903)-123-45-67,并且想要找到它包含的所有数字 。
数量 {n}
缩写:
案例:匹配开始或结束标签
// 1.量词的使用const re = /a{3,5}/ig// 解释re规则:字母a要求连续3~5位,大小写字母都可以,全部匹配const message = "fdaaa2fdaaaaaasf42532fdaagjkljlaaaaf"const results = message.match(re)console.log(results)//(3) ['aaa', 'aaaaa', 'aaaa']// 2.常见的符号: +/?/*// +: {1,}// ?: {0,1}// *: {0,}// 3.案例: 字符串的html元素, 匹配出来里面所有的标签const htmlElement = "哈哈哈我是标题"const tagRe = /<\/?[a-z][a-z0-9]*>/ig// 解释规则:第一个字符必须为"<";第二个字符为转义斜杠字符,有没有都可以;第三个字符为小写字母范围内;第四个字符可以是小写字母或者数字,然后可以多次出现或者不出现const results2 = htmlElement.match(tagRe)console.log(results2) //(6) ['', '', '', '', '', '']
3.6_贪婪( )和惰性( lazy)模式
如果有这样一个需求:匹配下面字符串中所有使用《》包裹的内容
默认情况下的匹配规则是查找到匹配的内容后,会继续向后查找,一直找到最后一个匹配的内容, 这种匹配的方式,称之为贪婪模式() 。【理解为,一次吃很多】
懒惰模式中的量词 。【理解,一次吃一点,吃多次】
// 1.贪婪模式/惰性模式const message = "我最喜欢的两本书: 《黄金时代》和《沉默的大多数》、《一只特立独行的猪》"// 默认.+采用贪婪模式const nameRe1 = /《.+》/ig//规则解释:第一个字符为《,中间字符(除了换行符)任意多个 。最后一个字符为》const result1 = message.match(nameRe1)console.log(result1)//(1) ['《黄金时代》和《沉默的大多数》、《一只特立独行的猪》']// 使用惰性模式const nameRe2 = /《.+?》/igconst result2 = message.match(nameRe2)console.log(result2)//(3) ['《黄金时代》', '《沉默的大多数》', '《一只特立独行的猪》']
3.7_捕获组( group)
模式的一部分可以用括号括起来 (...),这称为“捕获组( group)” 。
捕获组有两个作用:
方法 str.match(),如果没有 g 标志,将查找第一个匹配并将它作为一个数组返回:
命名 捕获组
非捕获组:
// 1.捕获组const message = "我最喜欢的两本书: 《黄金时代》和《沉默的大多数》、《一只特立独行的猪》"// 使用惰性模式const nameRe = /(?:《)(?.+?)(?:》)/ig// 解释规则:一对括号表示一个捕获组,而不是符号 。//第一个捕获组:;一定要有《,但是在获取结果时,抛弃这个符号// 第二个捕获组:,有木有都行;后面的符号(除了换行符)任意多个// 第三个捕获组:一定要有》,但是在获取结果时,抛弃这个符号// ig:不管大小写字母,全词搜索const iterator = message.matchAll(nameRe) //返回的是迭代器for (const item of iterator) {console.log(item)}// 2.将捕获组作为整体const info = "dfabcabcfabcdfdabcabcabcljll;jk;j"const abcRe = /(abc){2,}/ig// 解释规则:字符串abc,必须连续两组以上console.log(info.match(abcRe))
or是正则表达式中的一个术语,实际上是一个简单的“或” 。
const info = "dfabcabcfabcdfdabcabcabcljcbacballnbanba;jk;j"const abcRe = /(abc|cba|nba){2,}/ig//规则解释:abc或cba或nba,连续两个以上的console.log(info.match(abcRe))
4_案例 4.1_歌词格式化
const lyricString = "[00:00.000] 作词 : 许嵩\n[00:01.000] 作曲 : 许嵩\n[00:02.000] 编曲 : 许嵩\n[00:22.240]天空好想下雨\n[00:24.380]我好想住你隔壁\n[00:26.810]傻站在你家楼下\n[00:29.500]抬起头数乌云\n[00:31.160]如果场景里出现一架钢琴\n[00:33.640]我会唱歌给你听\n[00:35.900]哪怕好多盆水往下淋\n[00:41.060]夏天快要过去\n[00:43.340]请你少买冰淇淋\n[00:45.680]天凉就别穿短裙\n[00:47.830]别再那么淘气\n[00:50.060]如果有时不那么开心\n[00:52.470]我愿意将格洛米借给你\n[00:55.020]你其实明白我心意\n[00:58.290]为你唱这首歌没有什么风格\n[01:02.976]它仅仅代表着我想给你快乐\n[01:07.840]为你解冻冰河为你做一只扑火的飞蛾\n[01:12.998]没有什么事情是不值得\n[01:17.489]为你唱这首歌没有什么风格\n[01:21.998]它仅仅代表着我希望你快乐\n[01:26.688]为你辗转反侧为你放弃世界有何不可\n[01:32.328]夏末秋凉里带一点温热有换季的颜色\n[01:41.040]\n[01:57.908]天空好想下雨\n[01:59.378]我好想住你隔壁\n[02:02.296]傻站在你家楼下\n[02:03.846]抬起头数乌云\n[02:06.183]如果场景里出现一架钢琴\n[02:08.875]我会唱歌给你听\n[02:10.974]哪怕好多盆水往下淋\n[02:15.325]夏天快要过去\n[02:18.345]请你少买冰淇淋\n[02:21.484]天凉就别穿短裙\n[02:22.914]别再那么淘气\n[02:25.185]如果有时不那么开心\n[02:27.625]我愿意将格洛米借给你\n[02:30.015]你其实明白我心意\n[02:33.327]为你唱这首歌没有什么风格\n[02:37.976]它仅仅代表着我想给你快乐\n[02:42.835]为你解冻冰河为你做一只扑火的飞蛾\n[02:48.406]没有什么事情是不值得\n[02:52.416]为你唱这首歌没有什么风格\n[02:57.077]它仅仅代表着我希望你快乐\n[03:01.993]为你辗转反侧为你放弃世界有何不可\n[03:07.494]夏末秋凉里带一点温热\n[03:11.536]\n[03:20.924]为你解冻冰河为你做一只扑火的飞蛾\n[03:26.615]没有什么事情是不值得\n[03:30.525]为你唱这首歌没有什么风格\n[03:35.196]它仅仅代表着我希望你快乐\n[03:39.946]为你辗转反侧为你放弃世界有何不可\n[03:45.644]夏末秋凉里带一点温热有换季的颜色\n"// 一. 没有封装// 1.根据\n切割字符串const lyricLineStrings = lyricString.split("\n")// console.log(lyricLineStrings)// 2.针对每一行歌词进行解析// [01:22.550]夏末秋凉里带一点温热有换季的颜色const timeRe = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/iconst lyricInfos = []for (const lineString of lyricLineStrings) {// 1.获取时间const result = lineString.match(timeRe)if (!result) continueconst minuteTime = result[1] * 60 * 1000const secondTime = result[2] * 1000const mSecondTime = result[3].length === 3? result[3]*1: result[3]*10const time = minuteTime + secondTime + mSecondTime// 2.获取内容const content = lineString.replace(timeRe, "").trim()// 3.将对象放到数组中lyricInfos.push({ time, content })}console.log(lyricInfos)/*打印效果如下0:{time: 0, content: '作词 : 许嵩'}1: {time: 1000, content: '作曲 : 许嵩'}2: {time: 2000, content: '编曲 : 许嵩'}3: {time: 22240, content: '天空好想下雨'}4: {time: 24380, content: '我好想住你隔壁'}5: {time: 26810, content: '傻站在你家楼下'}*/