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)文章
詳解react中useCallback內(nèi)部是如何實現(xiàn)的
前幾天有人在問在useCallback函數(shù)如果第二個參數(shù)為空數(shù)組, 為什么拿不到最新的state值，那么這一章就來分析一下useCallback內(nèi)部是如何實現(xiàn)的，感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧2023-07-07
這篇文章主要為大家介紹了React?狀態(tài)管理工具優(yōu)劣勢示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
React是一個狀態(tài)機主要體現(xiàn)在state上，通過與用戶交易實現(xiàn)不同的狀態(tài)，state是組件的私有屬性，是用來初始化的，本文重點給大家介紹react中的state的簡寫方式，感興趣的朋友一起看看吧2021-08-08
React如何使用axios請求數(shù)據(jù)并把數(shù)據(jù)渲染到組件
這篇文章主要介紹了React如何使用axios請求數(shù)據(jù)并把數(shù)據(jù)渲染到組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
使用 React hooks 實現(xiàn)類所有生命周期
react 自 16.8 開始，引入了 Hooks 概念，使得函數(shù)組件中也可以擁有自己的狀態(tài)，并且可以模擬對應(yīng)的生命周期，這篇文章主要介紹了使用 React hooks 怎么實現(xiàn)類里面的所有生命周期,需要的朋友可以參考下2023-02-02
react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom
這篇文章主要介紹了react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
圖片懶加載是一種優(yōu)化網(wǎng)頁性能的技術(shù),它允許在用戶滾動到圖片位置之前延遲加載圖片,通過懶加載,可以在用戶需要查看圖片時才加載圖片,避免了不必要的圖片加載,本文給大家介紹了React實現(xiàn)圖片懶加載的常見方式,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了react-router 路由切換動畫的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2022-12-12
這篇文章主要介紹了react如何將字符串轉(zhuǎn)義成html語句問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了React報錯Invalid hook call解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12