React实现关键字高亮显示

2019年10月24日22:45:14 发表评论 阅读(55)

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标签

 

完。

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛