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

正则表达式案例练习

案例一: 歌词解析

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

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

/*
  [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) 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 })
}

// 测试
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.将时间戳转为Date
  const 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