溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需要像瀏覽器的全局搜索一樣，搜索指定模塊的對應值，然后將匹配到的內容添加背景顏色等。
思路
實現
代碼實現：
let wrap = document.querySelector('.wrap');
let innerHTML = wrap.innerHTML;
let reg = new RegExp(query, 'g');
innerHTML = innerHTML.replace(reg, '<span >' + 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 >' + preQuery + '</span>', 'g');
innerHTML = innerHTML.replace(preReg, preQuery);
}
if (query) {
let reg = new RegExp(query, 'g');
innerHTML = innerHTML.replace(reg, '<span >' + 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模擬瀏覽器實現全局搜索功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
