網上看到很多js實現的關鍵詞高亮顯示，方法都是一個道理，先獲取要替換的文字區域，然後在用正則匹配到關鍵詞，並進行替換。

react中實現起來似乎更簡單一些。

我這裡的需求是通過搜尋框搜尋出新聞列表，在已經獲取到新聞列表資料中使用filter函式，獲取到每一個新聞的title,並定義關鍵詞正則，返回替換後的樣式，react不能直接解析帶html標籤的字串,方法如下：

render() {

        const newsList=this.state.newsList;

        if(this.props.type==='tag'||this.props.type==='search'){

            let keyword=this.props.id; //這裡是父元件傳過來的關鍵詞

            newsList.filter((value,index) => {  //使用filter函式過濾新聞列表資料

                var re =new RegExp(keyword,"g"); //定義正則

                value.title=value.title.replace(re, `<span class="keyword">${keyword}</span>`); //進行替換，並定義高亮的樣式

            })

        }

        return (

            <div>

                {newsList.map((value,index) => {

                    return (<NewsListItem news={value} key={index} />)  //把新聞傳遞給新聞列表的單個新聞元件

                    })

                }

                <div className="btn-more transition" onClick={this.fetchMoreList}>{this.state.loadingText}</div>

            </div>

        );

    }

NewsListItem元件渲染title:

<div className="item-title" dangerouslySetInnerHTML = {{ __html:news.title }}></div>

大功告成。