正则表达式案例练习-封装工具函数歌词解析和时间格式化

文章目录

正则表达式案例练习
- 案例一: 歌词解析
- 案例二: 时间格式化

正则表达式案例练习

案例一: 歌词解析

我们模拟从服务器拿到歌词, 要求根据歌曲播放的时间展示对应的歌词

我们从服务器获取过来的歌词一般都是两部分: 时间节点和歌词(如下)

/*[00:00.000] 作词 : 许嵩[00:01.000] 作曲 : 许嵩[00:02.000] 编曲 : 许嵩[00:22.240] 天空好想下雨
*/

一般开发中, 我们都需要将服务器给的数据装换成如下一个个对象, 再存放在一个数组中

/*将每句变成如下一个个对象, 比较歌曲正在播放的时间和歌词的时间即可[00:00.000] 作词 : 许嵩 -> { time: 0, content: "作词: 许嵩" }[00:01.000] 作曲 : 许嵩 -> { time: 1000, content: "作曲: 许嵩" }[00:02.000] 编曲 : 许嵩 -> { time: 2000, content: "编曲 : 许嵩" }[00:22.240] 天空好想下雨 -> { time: 2224, content: "天空好想下雨" }
*/

明确了大致做法, 我们来写代码试试吧, 这里把源代码给大家

// 模拟服务器拿到的歌词数据
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")// 3.创建一个空数组
const lyricInfos = []const timeRe = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/i //因为有些时间节点第三组也是有两位数的情况
// 2.使用正则匹配, 针对每一行歌词进行解析
for (const lineString of lyricLineStrings) {// 2.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.2获取内容const content = lineString.replace(timeRe, "")// 3.将对象加入到数组中lyricInfos.push({ time, content })
}// 测试
console.log(lyricInfos)

实际开发中我们会对很多歌曲的歌词进行解析, 所以一般会封装成一个独立函数(如下)

function parseLyric(lyricString) {// 1. 通过换行符\n将字符串分隔开来const lyricLineStrings = lyricString.split("\n");// 3.创建一个空数组const lyricInfos = [];const timeRe = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/i; //因为有些时间节点第三组也是有两位数的情况// 2.使用正则匹配, 针对每一行歌词进行解析for (const lineString of lyricLineStrings) {// 2.1我们需要获取到时间节点并转为毫秒const result = lineString.match(timeRe);if (!result) continue;const minuteTime = result[1] * 60 * 1000;const secondTime = result[2] * 1000;const mSecondTime =result[3].length === 3 ? result[3] * 1 : result[3] * 10;const time = minuteTime + secondTime + mSecondTime;// 2.2获取内容const content = lineString.replace(timeRe, "");// 3.将对象加入到数组中lyricInfos.push({ time, content });}return lyricInfos
}

案例二: 时间格式化

时间格式化：从服务器拿到时间戳，转成想要的时间格式

由于这个时间格式化会在多处应用, 我们也会封装一个工具函数, 实现思路如下:

// 1.工具函数第一个参数传入时间戳
// 2.第二个参数传入想要展示时间的格式 yyyy/MM/dd hh-mm-ss yyyy-MM-dd hh:mm:ss
// 我们可以直接使用正则匹配对应的年月日, 时分秒替换掉
function formatTime(timestape, fmtString) {}

源代码如下:

function formatTime(timestape, fmtString) {// 1.将时间戳转为Dateconst date = new Date(timestape);// 2.获取到值并和正则匹配起来, 放在一个对象const dateObj = {"y+": date.getFullYear(),"M+": date.getMonth() + 1,"d+": date.getDate(),"h+": date.getHours(),"m+": date.getMinutes(),"s+": date.getSeconds(),};// 3.for循环进行替换for (key in dateObj) {// 根据对象中的key创建正则const keyRe = new RegExp(key);if (keyRe.test(fmtString)) {// 将value转为字符串, 使用字符串的padStart方法自动补零const value = (dateObj[key] + "").padStart(2, 0);fmtString = fmtString.replace(keyRe, value);}}return fmtString;
}// 测试
console.log(formatTime(1000, "yyyy-MM-dd hh:mm:ss")); // 1970-01-01 08:00:01
console.log(formatTime(1000, "hh:mm:ss yyyy.MM.dd")); // 08:00:01 1970.01.01

正则表达式案例练习-封装工具函数歌词解析和时间格式化相关推荐

itwangyang - 再次继续卷起来-20 个 JS 封装工具函数
itwangyang - 再次继续卷起来-20 个 JS 封装工具函数前言日常开发中,面对各种不同的需求,我们经常会用到以前开发过的一些工具函数,把这些工具函数收集起来,将大大提高我们的开发效率. ...
lrc歌词解析(正则表达式)与歌词卡拉ok显示的思路
一.从本地读取lrc文件从本地读取文件,android提供了与java相同的io操作,只不过要在AndroidManifest.xml添加读写sdcard权限 <uses-permi ...
指针||指针和数组||指针和函数||指针、数组、函数案例描述：封装一个函数，利用冒泡排序，实现对整型数组的升序排序
指针指针的基本概念指针的作用: 可以通过指针间接访问内存内存编号是从0开始记录的,一般用十六进制数字表示可以利用指针变量保存地址指针变量的定义和使用指针变量定义语法: 数据类型 * 变量名 ...
原生JS基于window.scrollTo()封装垂直滚动动画工具函数
概要: 原生JS基于window.scrollTo()封装垂直滚动动画工具函数,可应用与锚点定位.回到顶部等操作. ####封装原因: 在vue项目中,遇到需要实现垂直滚动效果的需求,初步想到的方法有 ...
JAVA之旅（五）——this，static，关键字，main函数，封装工具类，生成javadoc说明书，静态代码块...
JAVA之旅(五)--this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块周末收获颇多,继续学习一.this关键字用于区分局部变量和成员变量同名的情况 ...
Spring Boot 整合 SpringDataNeo4j 并封装工具类解析PathValue
Spring Boot 整合 SpringDataNeo4j 并封装工具类解析PathValue 一.Neo4j 二.Neo4j客户端浏览器三.maven依赖四.节点/关系映射 1.NodePer ...
Qt正则表达式学习之LRC歌词解析器
正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表通常被用来检索.替换那些符合某个模式(规则)的文 ...
关于Vue中常用的工具函数封装
## Vue 项目中工具函数,我们通常会添加到Vue的原型中,这样就实现了全局函数 import Vue from 'vue' Vue.prototype.$tools = function (){} ...
初学者也能看懂的 Vue2 源码中那些实用的基础工具函数
1. 前言大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 想学源码,极力推荐之前我写的<学习源码整体架构系列>jQuery.underscore.l ...