使用开发工具控制台中的 JavaScript 片段从 HTML 获取 YouTube 播放列表标题和频道名称

Posted 2023-02-24

【中文标题】使用开发工具控制台中的 JavaScript 片段从 HTML 获取 YouTube 播放列表标题和频道名称

【英文标题】：Getting YouTube Playlist Titles and Channel Names from HTML using a JavaScript snippet in Dev Tool Console

【发布时间】：2022-01-23 14:46:38

【问题描述】：

我想要 YouTube 播放列表的标题和频道名称用于备份。我在网上找到了这个 sn-p，它完成了一半的工作，使用开发工具中的 javascript 从播放列表页面的 html 中提取信息。

console.log(Array.from(document.querySelectorAll('.ytd-playlist-video-list-renderer #video-title')).map((el) => return el.textContent.trim() ).sort().join("\n"))

这会过滤掉视频的所有标题，我可以将其复制到文本文件中。问题是我希望频道名称也包含在每个条目中，但我不知道该怎么做。

目前看起来是这样的：

[视频标题 1]

[视频标题 2]

...

我希望它看起来像这样：

[频道名称 1] 的[视频标题 1]

[频道名称 2] 的[视频标题 2]

...

有谁知道如何改变 sn-p 来实现这一点？

这是一个包含 16 个视频的示例播放列表供您测试：https://www.youtube.com/playlist?list=PLTHOlLMWEwVy2ZNmdrwRlRlVfZ8fiR_ms

【问题讨论】：

请通过此代码提供您正在使用的 youtube 播放列表。

@MarcoAurelioFernandezReyes 我正在尝试在多个播放列表中使用它，因为 HTML 结构相同，所以确切的播放列表并不重要，对吧？不过，我在帖子中添加了一个示例播放列表。

你有没有尝试过……？频道标题似乎包含在 ID 为 title 的 h1 中 - 但由于 YT 生成了这种糟糕的 HTML（就像大多数主要公司一样），同一页面中的其他元素使用相同的 ID，因此访问此元素是不完全是微不足道的。更容易访问文档标题 - 在频道名称之后仍然包含- YouTube，但也将其删除，我将留给你。 return el.textContent.trim() + ' by ' + document.title 应该可以帮助您入门。

【参考方案1】：

我不熟悉您发布的 javascript 代码的结构，但是，如果您有兴趣，可以尝试以下代码：

// Videos in playlist: 
vidsInPlaylist = document.querySelectorAll(".style-scope ytd-playlist-video-renderer");

// Loop videos in playlist: 
for (var i = 0; i < vidsInPlaylist.length; i++) 
   // Print video title and channel name: 
   console.log(vidsInPlaylist[i].__templateInfo.nodeList[6].innerText + " by " + vidsInPlaylist[i].__templateInfo.nodeList[7].innerText)

在您的 YouTube 播放列表示例中，结果如下：

SNOWBOARDING WITH THE NYPD by CaseyNeistat
Make It Count by CaseyNeistat
DO WHAT YOU CAN'T by CaseyNeistat
Bike Lanes by Casey Neistat by CaseyNeistat
what would you do with $25,000? by CaseyNeistat
the surprise in South Africa by Casey Neistat by CaseyNeistat
Bike Thief 2012 by CaseyNeistat
Travel With Style - Casey Neistat for J.Crew by CaseyNeistat
Crazy German Water Park by CaseyNeistat
The Dark Side of the iPhone 5S Lines by CaseyNeistat
A Love Story 8 Years in the Making by CaseyNeistat
Black Market Takes Over the iPhone 6 Lines by CaseyNeistat
Life Explained in 27 Seconds by CaseyNeistat
The Devil's Pool by CaseyNeistat
Draw My Life - Casey Neistat by CaseyNeistat
Snowboarding New York City by CaseyNeistat

【讨论】：

谢谢，这行得通，但我想知道你是怎么想到的？我并没有真正编码，所以我所做的只是使用检查器尝试查找包含文本的元素，您查找“__templateInfo”的过程是什么，并且正在查找这些特定的 nodeList 迭代，其中包括文本只是试验和错误?可能是愚蠢的问题，但我真的一无所知

@Miwu，我确实检查了网站上的元素，并且 - 一旦我找到了我想要的文本 - 我右键单击 > 复制 js 路径并从该选择器中，然后，我粘贴了这个选择器然后按回车，在控制台选项卡的结果中，展开结果并确定要提取的数据，然后，右键单击 > 复制 js 路径。希望这个解释清楚并且对您有所帮助。