Блог

Главная - Вопросы по программированию - Использование .split для разделения содержимого в строке

Использование .split для разделения содержимого в строке

#javascript #split

Вопрос:

Привет, у меня есть строка, в которой я хочу добавить содержимое «ipsum dolar», завернуть его в тег span и изменить фон на красный. Мой код делает это, но он заключает два слова в отдельные теги span. Как бы я изменил свой код, чтобы объединить их в один тег span вместе? Любая помощь в этом будет признательна.

 var findWords = 'ipsum dolor';
var elem = document.querySelectorAll('p.content');

elem.forEach(function(el) {
  el.innerHTML = el.textContent.split(' ').map(function(i) {
    return findWords.indexOf(i) > -1 ? '<span class="matched">'   i   '</span>' : i;
  }).join(' ');
}); 
 .matched {background: red;} 
 <p class="content"> Lorem ipsum dolor sit amet</p>
<p class="content"> Lorem ipsum dolor sit amet</p>

Комментарии:

1. Может быть, этот фрагмент stackblitz поможет вам в этом

Ответ №1:

В этом случае будет лучше использовать .replace() :

 var findWords = 'ipsum dolor';
var elem = document.querySelectorAll('p.content');

elem.forEach(function(el) {
  el.innerHTML = el.textContent.replace(new RegExp(findWords, 'g'), '<span class="matched">'   findWords   '</span>');
}); 
 .matched {background: red;} 
 <p class="content"> Lorem ipsum dolor sit amet</p>
<p class="content"> Lorem ipsum dolor sit amet ipsum dolor</p>
Метки: