React 如何實現動態搜索高亮

• 前言
• 一、大體流程
• 二、使用步驟
• • 1.封裝用于樣式變化的函數
  • 2.使用函數
• 總結

---

前言

任務需求

實現類似網易云這樣的搜索聯想

---

一、大體流程

拿到用戶拿到的Input中的value數據,發送請求獲取后端響應回來的數據并展示，
唯一的技術難點就是,如何讓用戶輸入的數據與后端返回的數據，呈現高亮顯示

二、使用步驟

1.封裝用于樣式變化的函數

代碼如下）：

/* 樣式格式化校驗 */ /* @content 初始文字@keyword 高亮文字@color 需要轉化的顏色 */ export const handleHighlightedWords = (content, keyWord, color) => {//1.判斷文本中是否包含,因為indexOf對大小寫敏感所以都轉化成大寫const index = content.toLocaleUpperCase().indexOf(keyWord.toLocaleUpperCase());//2.定義正則 全局匹配不區分大小寫const Rex = new RegExp(keyWord, "gi");//3.判斷并處理if (index !== -1) {return content.replace(Rex, (text) => {return `<font style="color:${color}">${text}</font>`;});} else {return content;} };

說明:

indexOf 對大小寫敏感所以我統一轉換成大寫再搜索

因為replace只能替換出現的第一個字符，且還區分大小寫所以,需要對replace
用正則進行增強

正則一般人不常用的話上手比較懵,其實也就是幾個字符
我這里表達的是匹配用戶輸入的值,并且開啟全局匹配,且不區分大小寫

最后增強replace ,又發現如果直接替換,無論大寫小寫都會替換成用戶輸入的值了，有又通過回調方法拿到匹配上的數據做增強

2.使用函數

代碼如下）：

<NavLinkkey={item.id}to={"/"}dangerouslySetInnerHTML={{__html: handleHighlightedWords(item.name,inputSearch,"#c20c0c"),}}>

說明:
dangerouslySetInnerHTML使用這種方式往NavLink中插入數據
類似于原生的innerHTML

---

總結

總的來說就是,拿到輸入的數據,先都轉換成大寫或小寫進行比較,如果有,使用正則去匹配字符串中的數據,再對匹配上的內容進行樣式增強。

總結

以上是生活随笔為你收集整理的React 如何实现动态搜索(联想搜索)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。