react實作搜尋關鍵字高亮的方法：1、利用正規從清單配對到關鍵字，再使用標籤包含關鍵字；2、為標籤新增color屬性，然後使用react富文本渲染方式進行渲染實現快速搜尋且關鍵字高亮即可。
本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。
react怎麼實現搜尋關鍵字高亮？
React實現快速搜尋並且關鍵字高亮
需求：
點擊搜尋按鈕，彈出模糊匹配列表。
下拉清單選擇選項，點選後跳轉對應頁面關鍵字所在地。
想法：
利用正規從清單配對到關鍵字，再使用標籤包含關鍵字，
為標籤新增color屬性，使用react富文本渲染方式進行渲染
js內容：
/**
* 关键字变色
* @params content 内容
* @params keyword 关键词
* @params tagName 标签名
*/
warpTag(content, keyword, tagName) {
if (content === "No results") {
return content
}
const a = content.toLowerCase()
const b = keyword.toLowerCase()
const indexof = a.indexOf(b)
const c = indexof > -1 ? content.substr(indexof, keyword.length) : ''
const val = `<${tagName} style="color:#FF6600;">${c}</${tagName}>`
const regS = new RegExp(keyword, 'gi')
console.log('regS',regS,keyword,val)
console.log('regS222222',content,content.replace(regS, val))
return content.replace(regS, val)
}jsx內容：
<span dangerouslySetInnerHTML={{__html: this.warpTag(item.n, keyword, "span")}}></span>推薦學習：《react影片教學》
以上是react怎麼實現搜尋關鍵字高亮的詳細內容。更多資訊請關注PHP中文網其他相關文章！
