如何掃描搜索結果頁面上的鏈接，然后突出顯示符合條件的項目，這樣我就不必全部單擊？

Question

我從一個例子開始：假設您正在在線商店中搜索兼容[XYZ]的產品。 但是結果頁面或產品列表頁面不會顯示該信息，並且項目兼容性也無法搜索，因此您必須單擊每個產品並進行檢查。 當您有100多種產品需要瀏覽時，這可能會非常艱巨。

我遇到了許多用於搜索結果頁面的瀏覽器插件（例如eBay或Craiglist），這些插件將搜尋並訪問每個結果鏈接，然后在每個項目的結果頁面上顯示一條信息。 現在，在單擊之前，我知道什么是[XYZ]兼容！

我想為特定網站的搜索結果編寫腳本。

• 我可以使用原始JavaScript實現此功能嗎？ 怎么樣？ （我更喜歡簡單的東西，如小書簽）
• 如果沒有，我將需要完成什么？

我只想知道哪個結果與XYZ兼容，然后在結果頁面上突出顯示它。 我想這就像使用cURL加載每個鏈接，然后使用字符串切片來查找兼容性文本。

Answer 1

為了簡單起見，我將使用jQuery，但如果可以的話，您可以將其轉換為純JS。

假設您的<a>鏈接位於#list父級中，並且可能導致肯定匹配的數據存儲在某些#phoneModel元素下的頁面中...

jsBin演示

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");
      }
    }
  });

});

...比在CSS中只需要一些類.match{ color:red; } .match{ color:red; } 。

但是再次...如果您有很多鏈接，那么進行如此昂貴的AJAX調用是一個非常糟糕的主意...