javascript - 我的 Greasemonkey 脚本如何找到具有特定模式的链接？

Question

我的目标页面有一些链接，如：

http://example.com/ref.php?564646 

数字变化的地方。

如何使用 Greasemonkey 脚本找到这些链接并在页面顶部显示它们？

Answer 1

要搜索 link 的任意模式，请使用jQuery和正则表达式(RegEx)href的强大功能。

然后使用 jQuery 添加克隆的链接并使用GM_addStyle()来定位和设置所有内容。

这是显示该过程的完整脚本。您还可以在 jsFiddle 上查看运行中的代码。：

// ==UserScript==
// @name     Use jQuery and RegEx to match arbitrary links
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

//--- Add a custom, regex-aware href selector
jQuery.extend (
    jQuery.expr[':'].hrefMatch = function (elem, J, Mtch, candidateNodeArry) {
        if (elem.hasAttribute ("href") ) {
            var zRegExp = new RegExp (Mtch[3], 'i');

            return zRegExp.test (elem.href);
        }

        return false;
    }
);

//-- Find links that match "ref.php?{some integer}"
matchedLinks = $("a:hrefMatch('ref\\.php\\?\\d+(?!\\w)')");

//-- Now add the links to the top of the page.
$("body").append ('<div id="gmMatchedLinks"></div>');
matchedLinks.clone (true, false). appendTo ("#gmMatchedLinks");

//-- Position the new links and style to taste.
GM_addStyle ( "                                 \
    #gmMatchedLinks a {                         \
        margin-right: 2em;                      \
    }                                           \
    #gmMatchedLinks {                           \
        position:   fixed;                      \
        top:        0px;                        \
        left:       0px;                        \
        background: orange;                     \
        padding:    1em;                        \
        z-index:    555;                        \
    }                                           \
" );