在react項目中，將關鍵字高亮顯示 ：
首先封裝一個方法，只需要傳入（'要檢索的內容','檢索的關鍵字','給內容中的關鍵字加上的有特殊標記的標簽名'）這三個參數即可高亮顯示關鍵字。詳見:https://segmentfault.com/a/1190000017433594
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:red;">${c}</${tagName}>`;
const regS = new RegExp(keyword, 'gi'); return content.replace(regS, val); }
如何調用:
<a href="#" dangerouslySetInnerHTML={{__html: this.warpTag(item.title, "js", "span")}}></a>
效果展示:
上面代碼相當於vue框架中的v-html功能。如果不像上面那樣寫，而是直接放到a標簽內的話: <a href="#" >{this.warpTag(item.title, "js", "span")}</a>顯示的效果會如下:
