大前端开发

搜索关键字高亮显示

2019-05-15  本文已影响1人  孤寂听雨
const searchKeyword = new RegExp(value,'ig');//value为输入的值,用正则转换成忽略大小
//data为文本内容,用忽略了大小写的搜索关键字把文本内容拆分为数组,再把高亮后的搜索关键字插入数组
data.split(searchKeyword).reduce((prevResult,current_item,index)=>{
  return (
     <span>
       <span>{prevResult}</span>
       <span className={styles.highLight}>{data.match(searchKeyword)[index-1]}</span>
       <span>{current_item}</span>
     </span>
  )
})
上一篇 下一篇

猜你喜欢

热点阅读