React实现关键字高亮显示

关键词高亮

我们往往会有这样的需求,在一个搜索列表中,你搜索出来的关键词会在结果中高亮显示,这种效果对于用户体验来讲是挺好的,至少在我看来。

本文来讲一下要怎样实现这样的效果。

思路

拿到搜索的关键词,在搜索结果中正则匹配关键词,替换为高亮显示的关键词。

代码

  1. let keyword = searchValue //搜索关键词
  2. listData.map((item) => {  //使用filter函数过滤新闻列表数据
  3. var re =new RegExp(keyword,“g”); //定义正则
  4. let val = `<span style=“color:#279EF3;”>${keyword}</span>`
  5. item.name=item.name.replace(re, val); //进行替换,并定义高亮的样式
  6. })

 渲染

  1. <li style={{textAlign:’left’,padding:’8px 0 0 8px’}} key={item.id} dangerouslySetInnerHTML={{ __html: item.name}}></li>

效果

高亮glif

 注意

不加[code]dangerouslySetInnerHTML[/code]会无法渲染html标签

 

完。