React 一行代码实现关键词高亮

2,485 阅读1分钟

背景

关键词高亮一般用于搜索场景中,对搜索结果进行高亮。

目前看到的实现方式大部分都是使用正则匹配 + 替换HTML片段的方式,这种方式看起来有些 dangerous,一点也不 React,非常不优雅。

实现

下面介绍一种 React 风格的实现方式,只需要一行代码,非常优雅: (根据评论区朋友的提醒,修改了一下)

function Highlight({ text, keyword }){
    return text.split(new RegExp(`(${keyword})`, "gi")).map((c, i) => c === keyword ? <mark key={i}>{c}</mark> : c );
}

体验一下

总结

这种方法使用起来很方便,也不仅限于在 React 中使用,在直接生成/替换 HMLT 片段的场景中也可以使用哦,快来试试吧~