如何使用JavaScript从数组中搜索关键字并突出显示父div标记中的所有文本

我正在搜索一个包含产品列表的网页，以查找数组中的关键字。当它在数组中找到任何单词时，会以红色背景突出显示该单词。那很好。现在，当它找到关键字时，我希望它将该产品的所有文本（在

标记中）都变成浅灰色，以便在向下扫描页面时可以轻松忽略该特定产品。我该怎么做？下面是演示：

以下是HTML：

<div>
<p>I bought some apples.</p>
<p>Apples are £2 per kg.</p>
</div>

<hr>

<div>
<p><a href="oranges.html">I bought some oranges.</a></p>
<p>Oranges are £1.50 per kg.</p>
</div>

<hr>

<div>
<p><a href="pears.html">I bought some pears.</a></p>
<p>Pears are £1.80 per kg.</p>
</div>

我买了一些苹果

苹果每公斤2英镑



橙子每公斤1.50英镑



梨每公斤1.80英镑

下面是JavaScript：

var regex = /(apples|oranges)/g;

$('body a, body p').each(function() {
    var $this = $(this);
    var text = $this.text();
    if (text.match(regex) && $this.children().length===0) {
        $this.html(
            $this.html().replace(regex, '<span style="background: #fa7373;">$1</span>')
        );
    }
});

var regex=/（苹果|橙子）/g；
$（'body a，body p'）。每个（function（）{
var$this=$（this）；
var text=$this.text（）；
if（text.match（regex）&&&$this.children（）.length==0）{
$this.html(
$this.html（）.replace（正则表达式，$1'）
);
}
});

您可以检查每个元素的文本，并设置其CSS颜色属性（如果它与正则表达式匹配）

var regex=/（苹果|橙子）/g；
$（'body a，body p，body div'）。每个（函数（）{
var$this=$（this）；
var text=$this.text（）；
if（text.match（regex））{
$this.css（“颜色”、“灰色”）；
if（$this.children（）.length==0）{
$this.html(
$this.html（）.replace（正则表达式，$1'）
);
}
}
});

我买了一些苹果

苹果每公斤2英镑



橙子每公斤1.50英镑



梨每公斤1.80英镑

@TimB没问题。