突出显示搜索结果中的关键词

在互联网上，很多js实现的关键词都是高亮的，方法都是一样的。首先，获取要替换的文本区域，然后将关键词与规则匹配并替换。

在react中实现起来似乎更简单。

我这里的需求是通过搜索框搜索新闻列表，在获得的新闻列表数据中使用过滤功能，获取每条新闻的标题，定义关键词规律性，返回替换后的样式。react无法直接解析带有html标记的字符串。方法如下：

render(){ const news list=this . state . news list；if(this . props . type==' tag ' | | this . props . type==' search '){ let关键字=this . props . id；//这里是关键字newslist.filter ((value，index)={//使用filter函数过滤新闻列表数据var re=new RegExp(关键字，' g ')；//定义常规值. title=value.title.replace (re，` span class=' keyword ' $ { keyword }/span `)；//替换并定义高亮样式})} return(div { news list . map((value，Index)={ return(news list item news={ value } key={ Index }/)//将新闻传递给新闻列表的单个新闻组件})} div类名=' BTN-更多过渡' onclick={this。fetchmorelist} {this。state . loading text }/div/div)} newlistitem组件呈现标题：

div

摘要

以上是边肖介绍的react中搜索结果中的重点关键词，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！