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

Question

我正在搜索包含产品列表的网页以查找数组中的关键字。当它在数组中找到任何单词时，它会用红色背景突出显示它。这很好用。现在，当它找到关键字时，我希望它使该产品的所有文本（在<div>标签内）具有浅灰色，以便在向下扫描页面时可以轻松忽略该特定产品。我怎样才能做到这一点？这是演示：JSFiddle

这是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>

这是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>')
        );
    }
});

标签： javascripthtmljquerycss

Answer 1

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>