在Greasemonkey中合并getComputedStyle和evaluate

Question

我需要将页面中具有特定字体的所有文本节点转换为一个数组。我试过..。

textnodes = document.evaluate("//* [@style='font-family: foo;']//text()["
            + "not(ancestor::script) and not(ancestor::style)]", document,
            null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

和

textnodes = document.evaluate("//* [@face='foo']//text()["
            + "not(ancestor::script) and not(ancestor::style)]", document,
            null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

但这些方法不适用于由外部CSS文件设置样式的页面。看起来getComputedStyle()是个不错的选择。我想我需要的是这样的东西..

var tags = document.getElementsByTagName('*');
for (var i in tags) {
    var style = getComputedStyle(tags[i], '');
    if (style.fontFamily.match(/foo/i)) {
        textnodes.push(tags[i]);
        }
    }

但在此方法中不返回文本节点。有没有什么办法我可以混合使用xpath evaluate()和getComputedStyle()或任何其他方法来实现这一点呢？

Answer 1

使用jQuery。对于GM脚本要做的其他事情，jQuery将是非常有用的，另外，它更健壮，跨浏览器的能力更强。

(1)将此行添加到Greasemonkey元数据部分，紧跟在// @include指令之后：

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

(请注意，您可能必须先卸载脚本，然后重新安装才能复制jQuery。)

(2)然后您可以使用此代码来获取节点：

var jPrelimNodes    = $("*:not(html, head, title, meta, script, link, style, body)");

var aMyTextNodes    = jPrelimNodes.map 
                    (
                        function () 
                        {
                            var jThis   = $(this);
                            if (jThis.children().length <= 1)   //-- Ignore containers.
                            {
                                if (/^\bTimes New Roman\b/i.test (jThis.css ("font-family") ) )
                                    return jThis; // Or return "this" or "jThis.text()", as desired.
                            }
                            return null;
                        } 
                    ).get ();

这将检查计算的样式，在本例中，将返回以Times 开头的节点。

你可以使用see a version of this code, in action, at jsFiddle。

Answer 2

一种简单的方法是查找所有文本节点：

textnodes = document.evaluate("//text()", document,
        null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

遍历找到的每个TextNode，然后你可以查找它的父的computedStyle。如果是这个字体，你可以push这个TextNode到textnodes。