react经验7:高亮关键字

淘人居士2023-12-15 16:28

预期效果：

实现原理

将需要高亮的关键词做成正则表达式

js 复制代码

new RegExp(`(${word})`, "gi")

使用上述正则表达式切割目标字符串

js 复制代码

origin.split(new RegExp(`(${word})`, "gi"))

切割结果会包含正则匹配到的词

过滤掉空字符，并对关键词包裹一层标签，以设置其样式

ts 复制代码

/**处理高亮词
*@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
    })
}

最后将切割处理后的结果渲染输出

js 复制代码

let title=highlightWord('12345','12')

js 复制代码

<label>
	{title.map(d=>d)}
</label>

上述代码实际会生成这个

html 复制代码

<label><mark>12</mark>345</label>

关键词被包裹了标签，此时就可以任意设定高亮样式了