背景

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

目前看到的实现方式大部分都是使用正则匹配 + 替换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 片段的场景中也可以使用哦，快来试试吧~