一日一技 | Bilibili 视频合集信息提取

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

问题：网上没有现成的 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'))

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