...
<Input 
    value={this.state.txt}
    placeholder="請輸入檢索內(nèi)容"
    onChange={e => this.setState({txt: e.target.value})}
></Input>
<Button onClick={this.dispatchHighLightText}>
    搜索
</Button>
...
<CheckBos 
    checked={this.state.isCheck}
    onChange={e => this.setState({isCheck: e.target.checked})}
>
	區(qū)分大小寫
</CheckBos>
...
<Button
    onClick={this.searchToNext}
>
    查找下一個
</Button>

...
<pre
    dangerouslySetInnerHTML={{__html: this.state.information}}
    contentEditable
>
    {/*動態(tài)插入html的容器*/}
</pre>

// 每個匹配到的都有的類名
.highLight{
    background-color: #a9a9a9;
}
// 點擊下一個時的類名，默認為第一個
.current{
    background-color: #32aaf8;
}

colorIndex = 0; // 初始化高亮標記
_information = ''; // 文本備份
dispatchHighLightText = () => {
    const {txt} = this.state; // 檢索內(nèi)容
    if(!txt){
        message.warning("請先輸入查詢條件"); 
        return;
    }
    // 重置高亮標記
    colorIndex = 0;
    const regex = new RegExp(txt, this.state.isCheck ? 'g' : 'gi'); // 不勾選 => 模糊匹配
    // 由于每次插入樣式都會污染文本，所以每次都需要從備份文本中重新渲染
    const newInformation = _information;
    const hightLightTxt = newInformation.replace(regex, (match,index) => `<span class="highLight"> ${match} </span>`);
    this.setState({infomation: hightLightTxt}, () => {
        // 視圖更新渲染然后，獲取到dom
        let highLightEle = document.querySelectorAll('.highLight');
        this.updateHeight(highLightEle)
    }); // render
}

// 點亮目標關鍵字
updateHeight = (highLightEle) => {
    highLightEle.forEach((element, index) => {
        if(index === colorIndex){
            element.classList.add('current');
            element.scrollIntoView({ behavior: 'smooth', block: 'center'});
        }else{
            element.classList.remove('current');
        }
    })
}

searchToNext = () => {
    let highLightEle = document.querySelectorAll('.highLight');
    if(heighLightEle.length){
        colrIndex = (colorIndex + 1 + highLightEle.length) % highLightEle.length;
        this.updateHeight(highLightEle)
    }
}