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>

我在父类中使用replace函数突出显示，searchKey是要突出显示的单词。但不确定如何更换

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

Answer 1

@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;
  }

Answer 2

有效！！谢谢，但我无法为其添加样式

    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 3

用于更改背景或字体颜色。给班级的跨度，然后在CSS中调用它，以便它可以有效地工作：）

<span class="highlight">${words}</span>

在CSS中！

.highlight { 颜色：“绿色” }

我需要在React应用程序中突出显示搜索到的文本

3 个答案: