我们往往会有这样的需求，在一个搜索列表中，你搜索出来的关键词会在结果中高亮显示，这种效果对于用户体验来讲是挺好的，至少在我看来。
本文来讲一下要怎样实现这样的效果。
思路
拿到搜索的关键词，在搜索结果中正则匹配关键词，替换为高亮显示的关键词。
代码
- let keyword = searchValue //搜索关键词
- listData.map((item) => { //使用filter函数过滤新闻列表数据
- var re =new RegExp(keyword,"g"); //定义正则
- let val = `<span style="color:#279EF3;">${keyword}</span>`
- item.name=item.name.replace(re, val); //进行替换，并定义高亮的样式
- })
渲染
- <li style={{textAlign:'left',padding:'8px 0 0 8px'}} key={item.id} dangerouslySetInnerHTML={{ __html: item.name}}></li>
效果
注意
不加dangerouslySetInnerHTML会无法渲染html标签
完。
微信小程序
互联网开发，终身学习者，欢迎您的关注！
