網上看到很多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>
總結
以上所述是小編給大家介紹的react中實現搜索結果中關鍵詞高亮顯示，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
