需求背景：需要学习数学建模相关知识，每天的学习进度以小时计算，需要计算视频分段时间，用来安排学习进度。

问题：网上没有现成的 Bilibili 视频合集信息提取工具

思路：从 HTML 代码入手解决获取视频合集信息

直接上手：JavaScript Bookmarklet 小书签代码，安装之后点击直接将总时间复制到剪切板

JavaScript 代码实现

使用元素检查器可以看出分集的信息存在的 ul 标签中，ul 标签的上级是 cur-list class，所以写一个 for 循环可以解决。

使用 document.getElementsByClassName('list-box')[0] 获取到 list-box 中的内容。由于 getElementsByClassName 返回的是一个数组，所以此处需要使用 [0] 来获取第一个结果。从下图可以看出实际的分集内容在 li 内，目前最外面还只是 ul。

所以可以再配合一个 querySelectorAll 选中所有的 li 标签，效果如下图所示，将内容赋值给变量，写一个 for 循环即可。

具体代码如下，由于稍后需要将数据放到 Excel 里求和，所以对于 12:34 这样的时间数据，需要在后面加上 .00 防止被 Excel 错误理解为 12 小时 34 分钟。中间的分割符使用 \t，让 Excel 可以识别到两个不同的列。

var result = '';
var content = document.getElementsByClassName('list-box')[0].querySelectorAll('li');
for (var i = 0; i< content.length; i++){
  temp = content[i].innerText.split('\n');
  if (temp[temp.length-1].length < 6){
    temp[temp.length-1] += ".00"
  }
  temp.join('\t')
  result += temp;
  result += '\n';
}
console.log(result.replace(/,/g, '\t'))

效果如下图所示，将输出结果复制到剪切板。

Excel 处理

新建 Excel 粘贴剪切板内容，由于标题长度不一，选中标题单元格，点击「开始 → 单元格 → 自动调整列宽」

使用 Excel 公式统计分集总时间，在 D2 单元格右下角点击 ➕ 自动填充所有总时间。

但是 Excel 默认的时间是 24 小时制，超过 24 小时的部分会被取余，所以需要对单元格的格式进行调整。选中 D 列单元格调整格式，输入自定义的 [hh]:mm:ss 格式应用即可。

最后效果如下图所示：

小技巧

上面的配图中，可以看到标题前面有集数序号，但是这是没有用的信息，可以考虑去除掉。可以使用正则表达式工具替换。此处给一个比较简便的解决方法，使用 perl 命令配合正则表达式解决，从 Excel 中复制标题列，在终端中运行该命令，运行完成后剪切板就是处理后的标题列，重新粘贴替换原来的标题列即可。

pbpaste|perl -pE 's/^\d+ //'|pbcopy