網(wǎng)上看到很多js實現(xiàn)的關(guān)鍵詞高亮顯示，方法都是一個道理，先獲取要替換的文字區(qū)域，然后在用正則匹配到關(guān)鍵詞，并進行替換。

創(chuàng)新互聯(lián)提供網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、網(wǎng)頁設(shè)計，高端網(wǎng)站設(shè)計，一元廣告等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，10多年的網(wǎng)站開發(fā)和建站經(jīng)驗,助力企業(yè)信息化建設(shè)，成功案例突破近千家,是您實現(xiàn)網(wǎng)站建設(shè)的好選擇.

react中實現(xiàn)起來似乎更簡單一些。

我這里的需求是通過搜索框搜索出新聞列表，在已經(jīng)獲取到新聞列表數(shù)據(jù)中使用filter函數(shù)，獲取到每一個新聞的title,并定義關(guān)鍵詞正則，返回替換后的樣式，react不能直接解析帶html標(biāo)簽的字符串,方法如下：

render() {
  const newsList=this.state.newsList;
  if(this.props.type==='tag'||this.props.type==='search'){
   let keyword=this.props.id; //這里是父組件傳過來的關(guān)鍵詞
   newsList.filter((value,index) => { //使用filter函數(shù)過濾新聞列表數(shù)據(jù)
    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>

總結(jié)

以上所述是小編給大家介紹的react中實現(xiàn)搜索結(jié)果中關(guān)鍵詞高亮顯示，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

分享文章：react中實現(xiàn)搜索結(jié)果中關(guān)鍵詞高亮顯示
本文鏈接：http://www.2m8n56k.cn/article4/gdeoie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)站設(shè)計公司、品牌網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)