javascript - 找到匹配的单词并在它们下划线 - 但只是单词

Question

我有以下代码，我试图搜索指定单词的所有实例并在其下划线:

$(".test:contains('moon')").css("text-decoration", "underline");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">The cow jumped over the moon</div>

以上内容是全文下划线。

如何让它仅在“moon”的实例下划线？

Answer 1

迭代每个元素并.replace其innerHTML:

$(".test:contains('moon')").each(function() {
  this.innerHTML = this.innerHTML.replace(/moon/g, '<span style="text-decoration: underline">moon</span>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">The cow jumped over the moon</div>