How can I scan the links from a search result page, and then highlight items that match a criteria, so that I don't have to click through them all?

Question

I'll start with an example: Say you're searching an online store for a product that is [XYZ] compatible. But the result page or product listing page don't display that information, and item compatibility is not searchable, so you have to click each product and check. This can be very arduous when you have 100+ products to look through.

I have come across numerous browser plugins for search result pages (such as eBay or Craiglist) of which will crawl through and visit each result link, and then display a piece of information on the result page for each item. Now I know what is [XYZ] compatible before clicking!

I want to write a script for a particular website's search results.

• Can I achieve this using vanilla JavaScript? How? (I'd prefer something simple like a bookmarklet)
• If not, what would I need to accomplish this?

I just want to know which result is XYZ compatible, and then highlight it on the result page. I imagine it would be something like using cURL to load each link, and then using string slicing to find the compatibility text.

Answer 1

I'll use jQuery for simplicity but you can translate to plain JS if you will.

Let's say your <a> links are inside some #list parent, and the data that could result a positive match is stored in pages under some #phoneModel element...

jsBin demo

var query = "samsung s6";
var regex = new RegExp(query, "i");

$("#list a").each(function() { // Every link in #list parent...

  var $link = $(this);

  $.ajax({
    url: $link.attr("href"),
    dataType: 'html',
    success: function (data) {
      if( data.match(regex) ){      
        $link.addClass("match");
      }
    }
  });

});

...than in CSS you simply need some class .match{ color:red; } .match{ color:red; } .

But again... if you have lot of links it's a really bad idea to do such expensive AJAX calls...