devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

模拟自动滚动并展开所有评论列表以及回复内容（如：抖音、b站等平台）_实现类似抖音评论列表

作者：盐析白兔 | 2024-07-13 09:57:15

赞

踩

实现类似抖音评论列表

由于各大视频平台的回复内容排序不都是按照时间顺序，而且想看最新的评论回复讨论内容还需逐个点击展开，真的很蛋疼，尤其是热评很多的情况，还需要多次点击展开，太麻烦！

于是写了一个自动化展开所有评论回复内容的脚本：

  1. //共计多少条实际评论----------------------------------------
  2. let commentTotal = () => parseInt(/\((.*?)\)/g.exec(document.querySelector(`.comment-header-with-search+div`).innerText)[1] || 0);
  3.  
  4. //共计多少条已经加载的评论----------------------------------------
  5. let commentLoadedTotal = () => document.querySelectorAll(`.comment-mainContent [data-e2e="comment-item"]`).length;
  6.  
  7. //打印有颜色的文字
  8. let consoleLog = (str, { color = '#409EFF' } = {}) => console.log(`%c${str}`, `box-sizing: border-box;padding: 5px 10px;border-radius: 4px;background-color: ${color};color: white;font-size: 14px;margin: 10px 0;`);
  9. //滚动往下（递归加载更多评论数量）----------------------------------------
  10. let old_commentLoadedTotal = 0;
  11. let index = 1;
  12. let recursion_scroll = (index = 1) => {
  13.     document.querySelector(`.comment-mainContent`).scrollTo(0, 99999999);//触发滚动加载更多评论
  14.     consoleLog(`滚动第${index}次`);
  15.     // 延时判断是否加载完毕所有评论内容
  16.     setTimeout(() => {
  17.         let now_commentLoadedTotal = commentLoadedTotal();
  18.         if (old_commentLoadedTotal == now_commentLoadedTotal) {
  19.             console.clear(); consoleLog(`已经加载所有评论共计${now_commentLoadedTotal}条，等待继续加载回复内容…`, { color: '#F56C6C' });
  20.             index = 1, loadExpandComment(index);//3、模拟展开所有回复
  21.         } else {
  22.             old_commentLoadedTotal = now_commentLoadedTotal;
  23.             recursion_scroll(++index);
  24.         }
  25.     }, 1000);
  26. }
  27.  
  28. //展开所有评论的回复内容----------------------------------------
  29. let loadExpandComment = (index = 1) => {
  30.     [...document.querySelectorAll(`.comment-mainContent button`)].filter(v => v.innerText.includes(`展开`)).forEach(v => v.querySelector(`span`).click());//点击展开所有回复
  31.     consoleLog(`点击[展开]按钮第${index}次`);
  32.     // 延时判断是否加载完毕所有评论回复
  33.     setTimeout(() => {
  34.         let hasExpandBtn = [...document.querySelectorAll(`.comment-mainContent button`)].map(v => v.innerText).join('').includes(`展开`);
  35.         hasExpandBtn ? loadExpandComment(++index) : consoleLog(`已经加载所有评论以及回复内容，共计${commentTotal()}条，请查看吧！       本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/818906
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。