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

我需要突出显示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>

---

@rennie，这里我为上面的查询创建了一个jsfillde。希望它有用。希望它有用

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

keyUpHandler（事件）{
var searchedPara=document.querySelector（'.search content p'）；
var words=event.currentTarget.value；
var regex=RegExp（单词'gi'）//不区分大小写
var替换=“”+单词+“”；
var newHTML=searchedPara.textContent.replace（regex，replacement）；
searchedPara.innerHTML=newHTML；
}

@rennie，我在这里为上述查询创建了一个jsfillde。希望它有用。希望它有用

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

keyUpHandler（事件）{
var searchedPara=document.querySelector（'.search content p'）；
var words=event.currentTarget.value；
var regex=RegExp（单词'gi'）//不区分大小写
var替换=“”+单词+“”；
var newHTML=searchedPara.textContent.replace（regex，replacement）；
searchedPara.innerHTML=newHTML；
}

它可以工作！！谢谢，但我不能添加样式

    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;

 }

var searchedPara=document.querySelector（'.search content p'）；
var字型={
颜色：'绿色'
}
var-words=搜索键；
var regex=RegExp（单词'gi'）//不区分大小写
变量替换=`${words}`
var newHTML=searchedPara.textContent.replace（regex，replacement）；
searchedPara.innerHTML=newHTML；
}

它可以工作！！谢谢，但我不能添加样式

    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;

 }

var searchedPara=document.querySelector（'.search content p'）；
var字型={
颜色：'绿色'
}
var-words=搜索键；
var regex=RegExp（单词'gi'）//不区分大小写
变量替换=`${words}`
var newHTML=searchedPara.textContent.replace（regex，replacement）；
searchedPara.innerHTML=newHTML；
}

用于更改背景或字体颜色。将类赋予span，然后在css中调用它，以便它能够有效地工作：）

${words}

在css中

.亮点{ 颜色：“绿色”

---

}用于更改背景或字体颜色。将类赋予span，然后在css中调用它，以便它能够有效地工作：）

${words}

在css中

.亮点{ 颜色：“绿色”

---

}

将其替换为文本，但将其包装在带有css类的span标记中，该类将为其提供如下背景颜色？innerHTML.replace（{searchKey}，{searchKey}）Errr是的，我想那会有用的，试试看！将其替换为文本，但将其包装在一个带有css类的span标记中，该类将为其提供如下背景颜色？innerHTML.replace（{searchKey}，{searchKey}）Errr是的，我想那会有用的，试试看！