:contains() 不返回预期的节点

Question

请考虑以下代码：

// @include     /(^https?:\/\/www\.|^https?:\/\/)google\.com(\.|\/).*/
// @include     /(^https?:\/\/www\.|^https?:\/\/)stackoverflow\.com\/.*/
// @include     /(^https?:\/\/www\.|^https?:\/\/)userscripts-mirror\.org\/.*/
// @include     http://wiki.greasespot.net/*
// @version     1.0
// @require     https://code.jquery.com/jquery-2.1.1.min.js
// @grant       GM_addStyle


$ ( 'body:contains("serscripts.org")').each ( function ()  {

var results = $(this);
var text = results.text();
console.log(text);
text = text.replace( /serscripts\.org/ig, "serscripts-mirror.org" );
text = text.replace( /(:8080|%3A8080)/ig, "");
    //results.text ( text );

} );

我预计返回应该只是包含该字符串的元素，但控制台上的结果是正文的所有文本。

---

考虑this page在线：

// @updateURL       https://userscripts.org/scripts/so...

我想改变它。

---

或this one：

// @require http://userscripts.org/scripts/source...

我也想换。

---

标签之间的所有单词都应该检查字符串，并且只返回有它的单词。

什么是正确的选择器？

---

注意：
<a></a> 之间的链接属性和文本已使用类似的 .each ( function ) 进行了更改。

Answer 1

:contains 正在返回预期的内容。来自the spec：

匹配的文本可以直接出现在所选元素、该元素的任何后代或它们的组合中。

---

一般来说，要替换、换行或突出显示网页上的文本术语，您需要在单独的TEXT_NODE 级别工作。其他任何东西都有被丢弃的风险：URL、ID、事件处理程序等。

您可以为此使用Tree Walker：

var txtWalker   = document.createTreeWalker (
    document.body,
    NodeFilter.SHOW_TEXT,
    {   acceptNode: function (node) {
            //-- Skip whitespace-only nodes
            if (node.nodeValue.trim() )
                return NodeFilter.FILTER_ACCEPT;

            return NodeFilter.FILTER_SKIP;
        }
    },
    false
);
var txtNode     = null;

while (txtNode  = txtWalker.nextNode () ) {
    var oldTxt  = txtNode.nodeValue;
    var newTxt  = oldTxt.replace (/serscripts\.org/ig, "serscripts-mirror.org");
    newTxt      = newTxt.replace (/(:8080|%3A8080)/ig, "");

    txtNode.nodeValue = newTxt;
}

这将安全地处理页面上的所有内容，除了 href、src 等 HTML 属性。

如果您想更改这些，请使用单独的、有针对性的 .each () 代码——就像你说的那样——但不要更改 <a></a> 之间的文本，因为这已经由 tree walker 完成了。