Мне нужно выделить искомый текст в приложении React

Question

Мне нужно выделить искомый текст в приложении React, ниже мой div.

<div className="search-content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis tortor a finibus feugiat. Aliquam eu volutpat odio, et tincidunt lorem. Proin mollis erat neque, sit amet ullamcorper sem suscipit ac.
</p>
</div>

Я использую функцию замены в родительском классе, чтобы выделить, searchKey - это слово, которое нужно выделить.но не уверен, как заменить

highlightedContent = (searchKey) => {
  let contentArr = document.getElementsByClassName('search-content')[0].innerHTML.replace()
}

Answer 1

это работает !!Спасибо, но я не могу добавить стиль к нему

    var searchedPara = document.querySelector('.search-content p');
    var wordStyle={
      color:'green'
    }
    var words = searchKey;
    var regex = RegExp(words, 'gi') // case insensitive
    var replacement =`<span style=${wordStyle}>${words}</span>`
    var newHTML = searchedPara.textContent.replace(regex, replacement);
    searchedPara.innerHTML = newHTML;

 }

Answer 2

@ rennie, здесь я создал jsfillde для вышеуказанного запроса.надеюсь, что это полезно.https://jsfiddle.net/Gaurav_Kumar_Rana/n5u2wwjg/258819/ надеюсь, что это полезно.

  keyUpHandler(event){
    var searchedPara = document.querySelector('.search-content p');
    var words = event.currentTarget.value;
    var regex = RegExp(words, 'gi') // case insensitive
    var replacement = '<b>'+ words +'</b>';
    var newHTML = searchedPara.textContent.replace(regex, replacement);
    searchedPara.innerHTML = newHTML;
  }