在項(xiàng)目開(kāi)發(fā)過(guò)程中遇到日志搜索高亮顯示關(guān)鍵字的需求:
本文采用數(shù)組方法reduce實(shí)現(xiàn)颖榜。
reduce簡(jiǎn)介：
語(yǔ)法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
參數(shù)：
| 參數(shù) | 描述 |
|---|---|
| function(total,currentValue, index,arr) | 必需。用于執(zhí)行每個(gè)數(shù)組元素的函數(shù)属韧。 |
| initialValue | 可選。傳遞給函數(shù)的初始值 |
函數(shù)參數(shù)：
| 參數(shù) | 描述 |
|---|---|
| total | 必需蛤吓。初始值, 或者上一輪計(jì)算結(jié)束后的返回值宵喂。 |
| currentValue | 必需。當(dāng)前元素(值) |
| index | 可選会傲。當(dāng)前元素(值)的索引 |
| arr | 可選锅棕。當(dāng)前元素(值)所屬的數(shù)組對(duì)象。 |
注意：如果initialValue不傳唆铐，函數(shù)的total參數(shù)會(huì)默認(rèn)為數(shù)組的第一個(gè)元素(值)哲戚，index會(huì)從1開(kāi)始
需求實(shí)現(xiàn)思路：
通過(guò)忽略大小寫的搜索關(guān)鍵字把日志文本拆分為一個(gè)數(shù)組，再利用忽略大小寫的正則匹配出原始文本中的符合要求的值(匹配生成為一個(gè)數(shù)組)艾岂，再利用reduce把高亮后的匹配出的關(guān)鍵字按順序插入到原本應(yīng)該在的位置顺少，成高亮后的日志文本。
實(shí)現(xiàn)代碼：
const searchKeyword = new RegExp(value,'ig');//value為輸入的值王浴，用正則轉(zhuǎn)換成忽略大小
//data為文本內(nèi)容脆炎，用忽略了大小寫的搜索關(guān)鍵字把文本內(nèi)容拆分為數(shù)組，再把高亮后的搜索關(guān)鍵字插入數(shù)組
data.split(searchKeyword).reduce((prevResult,current_item,index)=>{
//下述的[index-1]氓辣，根據(jù)上述的注意秒裕，沒(méi)有傳遞初始值，index是從1開(kāi)始
return (
<span>
<span>{prevResult}</span>
<span className={styles.highLight}>{data.match(searchKeyword)[index-1]}</span>
<span>{current_item}</span>
</span>
)
})
