react中實現(xiàn)搜索結(jié)果中關(guān)鍵詞高亮顯示
更新時間：2018年07月31日 14:06:47 作者：蓓蕾心晴
這篇文章主要介紹了react中實現(xiàn)搜索結(jié)果中關(guān)鍵詞高亮顯示,使用react實現(xiàn)要比js簡單很多，方法都是大同小異，具體實現(xiàn)代碼大家跟隨腳本之家小編一起看看吧
網(wǎng)上看到很多js實現(xiàn)的關(guān)鍵詞高亮顯示，方法都是一個道理，先獲取要替換的文字區(qū)域，然后在用正則匹配到關(guān)鍵詞，并進行替換。
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ù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
使用Axios在React中請求數(shù)據(jù)的方法詳解
這篇文章主要給大家介紹了初學(xué)React,如何規(guī)范的在react中請求數(shù)據(jù),主要介紹了使用axios進行簡單的數(shù)據(jù)獲取,加入狀態(tài)變量,優(yōu)化交互體驗,自定義hook進行數(shù)據(jù)獲取和使用useReducer改造請求,本文主要適合于剛接觸React的初學(xué)者以及不知道如何規(guī)范的在React中獲取數(shù)據(jù)的人2023-09-09
這篇文章主要介紹了react+antd動態(tài)增刪表單方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
react ant protable自定義實現(xiàn)搜索下拉框
這篇文章主要介紹了react ant protable自定義實現(xiàn)搜索下拉框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
React-Router(V6)的權(quán)限控制實現(xiàn)示例
本文主要介紹了React-Router(V6)的權(quán)限控制實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要為大家歸納總結(jié)了Remix?表單常用方法及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了工程級?React?注冊登錄全棧級流程,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
本篇文章主要介紹了使用ES6語法重構(gòu)React代碼詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
詳解React-Native全球化多語言切換工具庫react-native-i18n
這篇文章主要介紹了詳解React-Native全球化語言切換工具庫react-native-i18n,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
在react類組件（class）寫法中，有setState和生命周期對狀態(tài)進行管理，但是在函數(shù)組件中不存在這些，故引入hooks（版本：>=16.8），使開發(fā)者在非class的情況下使用更多react特性2022-08-08
這篇文章主要為大家介紹了react編寫可編輯標(biāo)題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08