预期效果:
实现原理
将需要高亮的关键词做成正则表达式
new RegExp(`(${word})`, "gi")
使用上述正则表达式切割目标字符串
origin.split(new RegExp(`(${word})`, "gi"))
切割结果会包含正则匹配到的词
过滤掉空字符,并对关键词包裹一层标签,以设置其样式
/**处理高亮词
*@param origin 目标字符串
*@param word 关键词
*@returns {ReactNode[]}
*/
function highlightWord(origin: string, word: string) {if (!word) {return [origin]}const sps = origin.split(new RegExp(`(${word})`, "gi"))//排除空字符,并对关键词包裹标签return sps.filter(c => c).map(c => {if (c.toLowerCase() === word.toLowerCase()) {return <mark>{c}</mark>}return c})
}
最后将切割处理后的结果渲染输出
let title=highlightWord('12345','12')
<label>{title.map(d=>d)}
</label>
上述代码实际会生成这个
<label><mark>12</mark>345</label>
关键词被包裹了标签,此时就可以任意设定高亮样式了