Hao

React实现关键字高亮显示

JavaScript 2019-10-24 3163 0
22:45:14

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>

效果

React实现关键字高亮显示

 注意

不加dangerouslySetInnerHTML会无法渲染html标签

 

完。

 

本文由 Hao创作，转载请注明

最后编辑时间：2019-10-24 22:45:14

发表评论