How can my userscript get a link based on the link's text?

Question

Given this HTML on the target page:

<dd class="ddTit">
<a href="http://abc.xxx.com/54781.html" target="_blank">special text words</a>
</dd>

How can I get the url based on the "special text words", and do the click in a Greasemonkey script?

I tried this:

var textlink = document.querySelector ("dd.ddTit a[textContent*='special']");
var clickEvent      = document.createEvent ('MouseEvents');
clickEvent.initEvent ('click', true, true);
textlink.dispatchEvent (clickEvent);

with no luck.

How do I select based on the textContent, such as textContent contains the word special?

Answer 1

Here it is a greasemonkey script using jquery that performs what you want:

// ==UserScript==
// @name       your script
// @namespace  http://foobarfoobar.com/
// @version    0.1
// @description  Trigger click with jquery
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @match      http://*/*
// ==/UserScript==

(function () {
    $(document).ready(function(){
        $('dd.ddTit').find("a:contains('special text words')").bind('click', function() {
            window.location.href = this.href;
            return false;
        }).trigger('click');

    });
})();

if you copy some of this code to your script make sure to include the line:

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

so the jquery code works well, also adjust the @match rule to the specific site you want to apply the script.

Answer 2

Alas, you cannot do it with querySelector() because CSS selectors do not (yet) offer a content/text selector.

Here's 3 approaches:

1. Loop through a targeted selection of nodes:

   var ddTitLinks  = document.querySelectorAll ("dd.ddTit a");
   
   for (var J = ddTitLinks.length - 1;  J >= 0;  --J) {
       var ddTitLink   = ddTitLinks[J];
       //--- Case-insensitive search.
       if (/special text words/i.test (ddTitLink.textContent) ) {
           var clickEvent      = document.createEvent ('MouseEvents');
           clickEvent.initEvent ('click', true, true);
           ddTitLink.dispatchEvent (clickEvent);
           break;
       }
   }
   

   
   

2. Use jQuery (a powerful library that will save you a ton of grief):

   // ==UserScript==
   // @name     _Click Special link(s)
   // @include  http://YOUR_SERVER.COM/YOUR_PATH/*
   // @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
   // ==/UserScript==
   
   //--- Note that contains() is CASE SENSITIVE.
   var specLink    = $("dd.ddTit a:contains('special text words')");
   if (specLink.length) {
       var clickEvent  = document.createEvent ('MouseEvents');
       clickEvent.initEvent ('click', true, true);
       specLink[0].dispatchEvent (clickEvent);
   }
   

   
   

3. Use XPath:

   //--- Note that contains() is CASE SENSITIVE.
   var specLinks   = document.evaluate (
       "//dd[contains(@class, 'ddTit')]/a[contains(text(), 'special text words')]",
       document,
       null,
       XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
       null
   );
   
   if (specLinks.snapshotLength) {
       var specLink    = specLinks.snapshotItem (0);
       var clickEvent  = document.createEvent ('MouseEvents');
       clickEvent.initEvent ('click', true, true);
       specLink.dispatchEvent (clickEvent);
   }
   

Answer 3

If you really have nothing but the content to identify the link, you may have to loop over all links to find the one you want:

var links = document.getElementsByTagName( 'a' );

for ( var i = 0; i < links.length; i++ ) {
    var link = links[i];
    if ( /special/.test( link.textContent ) ) {
        // do something with link
    }
}