react如何實現搜索關鍵字高亮

這篇文章主要講解了“react如何實現搜索關鍵字高亮”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“react如何實現搜索關鍵字高亮”吧！

react實現搜索關鍵字高亮的方法：1、利用正則從列表匹配到關鍵詞，再使用標簽包含關鍵詞；2、給標簽添加color屬性，然后使用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如何實現搜索關鍵字高亮這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！