найти подходящие слова и подчеркнуть их - но только слова

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>

Вышеприведенный текст подчеркивает весь текст.

Как я могу подчеркнуть только случаи "луны"?

Answer 1

С вашим текущим кодом вы применяете стиль ко всему element, содержащему искомый word.

. Вам нужно пройтись по всем подобранным словам и заменить их соответственно желаемым стилем. в html содержащих element:

let word = 'moon';

$(".test:contains('" + word + "')").each(function() {
  let regex = new RegExp("(" + word + ")", 'g');
  $(this).html($(this).text().replace(regex, '<span style="text-decoration: underline">$1</span>'));
});

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

Answer 2

Итерация по каждому элементу и .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>