需要像瀏覽器的全局搜索一樣，搜索指定模塊的對應值，然后將匹配到的內容添加背景顏色等。
思路
實現
代碼實現：
let wrap = document.querySelector('.wrap');let innerHTML = wrap.innerHTML;let reg = new RegExp(query, 'g');innerHTML = innerHTML.replace(reg, '<span style="color: #000; background-color: #e3e4e5">' + query + '</span>');wrap.innerHTML = innerHTML;具體的實現搜索實現就完成了，但是上面代碼還有個缺陷，就是更換搜索內容時，之前搜索的內容還是具有選中的樣式，那么接下來完善功能：
let preQuery = ''; // 上一次搜索的內容let wrapDom = ''; // 搜索區域的dom元素function searchFn(dom, query) { let wrap = wrapDom || document.querySelector(dom); let innerHTML = wrap.innerHTML; if (!preQuery) { let preReg = new RegExp('<span style="color: #000; background-color: #e3e4e5">' + preQuery + '</span>', 'g'); innerHTML = innerHTML.replace(preReg, preQuery); } if (query) { let reg = new RegExp(query, 'g'); innerHTML = innerHTML.replace(reg, '<span style="color: #000; background-color: #e3e4e5">' + query + '</span>'); } wrap.innerHTML = innerHTML; preQuery = query;}至此搜索高亮的功能就已經實現了。
注意事項
搜索區域的dom元素中不能使用title屬性，因為當使用title屬性時也會把對應的title屬性內容替換，頁面渲染時就會產生問題，其實可以將匹配規則的正則表達式重寫，但是能力有限，不知道如何編寫排除title屬性的正則表達式
如果使用Vue等框架編寫時，搜索完之后vue相關的事件和屬性全都失效了，因為我們這樣是直接把dom給換了，這種情況下有兩種解決方法：
搜索完成之后，再實例化一次vue
function resetVm() { vm.destroy() vm = new Vue({...})}但是這樣會有個問題，重新實例化vue實例之后，搜索內容就沒了
不使用vue，可以用jQuery去實現頁面，這樣就不會有事件失效的問題
總結
以上所述是小編給大家介紹的JS模擬瀏覽器實現全局搜索功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
