javascript - 根据 CSS 和内容选择包含行

Question

我知道如何处理 CSS，因此我可以创建自定义过滤器，以使用名为“stylish”的 Chrome 扩展来阻止某些网站上的某些帖子名称。

但是，由于 CSS3 选择器不允许反向搜索，我想使用 Chrome 中的 Tampermonkey 和 jQuery 或 javascript 来增强我的自定义过滤器。

我想要的是使用 javascript 实现如下所示的效果(尚不适用于 CSS3。)

.wordbreak[content="USER_NAME"] < a < tr {display:none!important}

我想做的是；找到名为 wordbreak 的类，其中第一个类也包含文本“USER_NAME”，然后如果“tr”同级树形成为，则将其样式设置为“display:none”； tr > a > .wordbreak + 内部文本为“USER_NAME”

我浏览了greasemonkey.org，找到了类似的东西，但我不知道如何让它工作。帮助将不胜感激!

---

链接the page我要修改

帖子列表，我想隐藏由“LibereQ:创作的行”

---

第一枪:

// ==UserScript==
// @name         Black list
// @match        https://cafe.naver.com/MyCafeIntro*
// @match        https://cafe.naver.com/jssct*
// @match        https://cafe.naver.com/jssct
// ==/UserScript==

document.querySelectorAll('tr > td > div > table > tbody > tr > td > a > .wordbreak').forEach(wordbreak => {
  if (wordbreak.textContent.includes('LiberaQ')) wordbreak.style.display = 'none';
}, 1000);

Answer 1

该脚本有 3 个主要问题:

1. 目标页面由 AJAX (javascript) 驱动，因此您必须使用 AJAX 感知技术，例如 MutationObserver 或 waitForKeyElements。
2. 选择器过于复杂——这意味着:
   (a) 您必须完全正确，缺少 td(例如)会破坏交易
   (b) 脚本变得更加脆弱(可能在某些页面上或将来失败)。
3. @match 列表错误。您所定位的实际内容位于 iframe 中，地址如下:cafe.naver.com/ArticleList.nhn?search...。

您想要的内容可以方便地用 wordbreak 类标记。这本身就是理想的选择器(根据您所展示的内容)。保持简单。

同时保持@match简单，但您可能会接受替代方案。

这是一个完整的脚本，说明了该过程:

// ==UserScript==
// @name        Black list
// @match       https://cafe.naver.com/*
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant       GM_addStyle
// @grant       GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

//Possible alternate match:
// @match       https://cafe.naver.com/ArticleList*

waitForKeyElements (".wordbreak", hideBlackListedNode);

function hideBlackListedNode (jNode) {
    if (jNode.text ().includes ('LiberaQ') ) {
        //jNode.hide ();                             // Hide just the node
        //jNode.closest ("tr").hide ();              // Hide the containing row
        /* Hide the containing row of the containing table
           The .parent() is needed due to a quirk of .closest().
        */
        jNode.closest ("tr").parent ().closest ("tr").hide ();
    }
}