Как выделить только определенные слова HTML-элемента?

Question

Я создаю расширение Chrome, чтобы выделить имя пользователя на странице. Я могу определить имя на странице, но у меня возникают трудности с выделением только имени пользователя вместо всего диапазона, в котором он находится. Ниже name_to_highlight находится переменная, содержащая строковое представление идентифицированного имени.

$( "span:contains('" + name_to_highlight + "')" ).contents().wrap( "<mark></mark>");

EDIT: Благодаря ответу я смог изменить код, чтобы он был применим к любой веб-странице.

// only highlight the child element containing name
  var targets = $( "*:contains('" + name_to_highlight + "')" );
  for(var i = 0; i < targets.length; i++ ){
    if(targets[i].children.length < 1){
    var spanText = targets[i].innerHTML;

    // wrapping a name class around the date
    targets[i].innerHTML = (spanText.replace(name_to_highlight, "<mark>" + 
   name_to_highlight + "</mark>"));
     }
   }

Answer 1

Вы - часть пути, но вы заключаете все содержимое элемента в теги <mark>.После того, как вы определили элемент, вам необходимо:

1. Извлечь содержимое,
2. Определить имя цели и обернуть его в теги, и
3. Замените существующее содержимое обновленной версией

. Для этого вам потребуется выполнить некоторые манипуляции со строками.,,что-то вроде следующего кода:

function highlightName(sName) {
  var targetSpan = $("span:contains('" + sName + "')");
  var spanText = targetSpan.text()
  
  targetSpan.html(spanText.replace(sName, "<mark>" + sName + "</mark>"));
}

highlightName('John Smith');
highlightName('Jack Jones');
highlightName('Julie Jones');

mark {background-color: yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p><span>My name is John Smith and I am new here</span>.</p>
<p><span>My name is Jane Smith and I am a veteran user</span>.</p>
<p><span>My name is John Doe and I am the owner</span>.</p>
<p><span>My name is Jack Jones and I am new here</span>.</p>
<p><span>My name is Julie Jones and I am an amateur user</span>.</p>

ПРИМЕЧАНИЕ: Если в промежутке есть что-то кроме текстового содержимого, код должен быть обновлен для сохраненияHTML-код.В настоящее время метод text() извлекает только текстовое содержимое <span>, и, когда его заменяют методом "html(), только вновь добавленные теги <mark> останутся дочерними элементами HTML.