在web自动识别贴贴过的帖子，提供跳转。
// ==UserScript==
// @name bgm相关回复跳转
// @version 0.3
// @description 在web自动识别贴贴过的帖子，提供跳转。
// @match https://bgm.tv/ep/*
// @match https://bangumi.tv/ep/*
// @match https://chii.in/ep/*
// @grant none
// @license MIT
// @namespace bgm_jump_related_post
// ==/UserScript==
// 几个todo，目前自己没这个需求，暂时简化。如果有人需要可以说一声：
// - [ ] 除了贴贴也支持回复的跳转
// - [ ] 暂时只支持番剧吐槽页面，主要是觉得别的页面也没必要。
// - [ ] 暂时只处理每层回复的一楼，这个主要是暂时懒得做先简化一下。也就是不支持比如说第二楼的所有回复贴贴。
(function () {
'use strict';
const selfUserId = $('.avatar').attr('href').split('/').pop();
// 先完成遍历处理第一层的逻辑
const replyList = $('#comment_list>div'); // 得到所有首层回复
let relatedPostIds = []; // 筛选最终跟当前用户相关的id
// replyList.slice(0, 2).each(function () { // 调试场景只看前三个帖子
replyList.each(function () { // 逐个过滤
if (checkReplyElementRelated(selfUserId, $(this))) {
relatedPostIds.push($(this).attr('id'));
}
});
// console.log(relatedPostIds);
const component = createJumpComponent(relatedPostIds);
const columnEPB = $('#columnEpB')
columnEPB.append(component);
})();
// 检查当前回复元素的「贴贴」里边是否包含当前用户id
function checkReplyElementRelated(userId, element) {
// 先在这个元素内继续选择 `a.item.selected`
// const likesGridItem = element.find('a.item.selected');
const innerDiv = element.children().eq(2)
// 这个元素里的 title 包含所有 贴贴元素的 HTML 文本，每个 `<a>` 就是一种类型的贴贴
const likesGridItemAs = innerDiv.find('.reply_content').children().eq(1).children();
if (likesGridItemAs.length === 0) {
return false;
}
let found = false;
likesGridItemAs.each(function () {
const title = $(this).attr('title');
if (checkUserIdInTitle(userId, title)) {
found = true;
return false; // break loop
// ! 这里才是坑，里边有个回调函数，return true 会直接返回到这个回调函数，而不是外层的函数
}
});
return found;
}
function checkUserIdInTitle(userId, title) {
const regex = /\/user\/(\w+)/g;
let match;
while ((match = regex.exec(title)) !== null) {
if (match[1] === userId) {
return true;
}
}
return false;
}
function createJumpComponent(postIds) {
// Basic CSS for styling the component
const styles = `
<style>
:root {
--jump-bg-color: #f9f9f9;
--jump-border-color: #ccc;
--jump-text-color: #333;
--jump-link-color: #3498db;
--jump-link-hover-color: #1abc9c;
--jump-link-active-color: #e74c3c;
--jump-shadow-color: rgba(0, 0, 0, 0.1);
}
@media (prefers-color-scheme: dark) {
:root {
--jump-bg-color: #2c2c2c;
--jump-border-color: #444;
--jump-text-color: #eee;
--jump-link-color: #5dade2;
--jump-link-hover-color: #48c9b0;
--jump-link-active-color: #ec7063;
--jump-shadow-color: rgba(0, 0, 0, 0.3);
}
}
.jump-component {
position: fixed;
top: 30%;
right: 40px;
width: 20%;
padding: 10px;
border: 1px solid var(--jump-border-color);
border-radius: 8px;
background-color: var(--jump-bg-color);
box-shadow: 0 4px 8px var(--jump-shadow-color);
color: var(--jump-text-color);
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.jump-component ul {
list-style: none;
padding: 0;
margin: 0;
}
.jump-component li {
margin: 5px 0;
display: flex;
align-items: center;
}
.jump-component li::before {
content: "•";
color: var(--jump-link-color);
font-weight: bold;
display: inline-block;
width: 1em;
margin-right: 0.5em;
transition: color 0.3s ease;
}
.jump-component a {
color: var(--jump-link-color);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease, transform 0.3s ease;
flex-grow: 1;
}
.jump-component a:hover {
color: var(--jump-link-hover-color);
transform: translateX(5px);
}
.jump-component a:active {
color: var(--jump-link-active-color);
}
</style>
`;
// HTML for the component
const linksHtml = postIds.map(link => `<li><a href="#${link}" target="_self">${link}</a></li>`).join('');
const componentHtml = `
<div class="jump-component">
<p>贴贴过的回复跳转</p>
<ul>
${linksHtml}
</ul>
</div>
`;
return styles + componentHtml;
}