需要像瀏覽器的全局搜索一樣，搜索指定模塊的對應(yīng)值，然后將匹配到的內(nèi)容添加背景顏色等。

思路

• 需要取到當(dāng)前指定區(qū)域的所有內(nèi)容
  
• 然后在取到的內(nèi)容中找到搜索的內(nèi)容加上對應(yīng)的背景顏色
  
• 最后在將修改后的內(nèi)容渲染到頁面上
  

實(shí)現(xiàn)

• 利用innerHTML取到對應(yīng)模塊的內(nèi)容
• 編寫對應(yīng)的正則表達(dá)式來匹配搜索的內(nèi)容
• 利用String.prototype.replace替換匹配到的內(nèi)容
• 最后在渲染到頁面上
  

代碼實(shí)現(xiàn)：

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;

具體的實(shí)現(xiàn)搜索實(shí)現(xiàn)就完成了，但是上面代碼還有個(gè)缺陷，就是更換搜索內(nèi)容時(shí)，之前搜索的內(nèi)容還是具有選中的樣式，那么接下來完善功能：

let preQuery = ''; // 上一次搜索的內(nèi)容
let wrapDom = ''; // 搜索區(qū)域的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;
}

至此搜索高亮的功能就已經(jīng)實(shí)現(xiàn)了。

注意事項(xiàng)

搜索區(qū)域的dom元素中不能使用title屬性，因?yàn)楫?dāng)使用title屬性時(shí)也會把對應(yīng)的title屬性內(nèi)容替換，頁面渲染時(shí)就會產(chǎn)生問題，其實(shí)可以將匹配規(guī)則的正則表達(dá)式重寫，但是能力有限，不知道如何編寫排除title屬性的正則表達(dá)式

如果使用Vue等框架編寫時(shí)，搜索完之后vue相關(guān)的事件和屬性全都失效了，因?yàn)槲覀冞@樣是直接把dom給換了，這種情況下有兩種解決方法：

搜索完成之后，再實(shí)例化一次vue

function resetVm() {
  vm.destroy()
  vm = new Vue({...})
}

但是這樣會有個(gè)問題，重新實(shí)例化vue實(shí)例之后，搜索內(nèi)容就沒了

不使用vue，可以用jQuery去實(shí)現(xiàn)頁面，這樣就不會有事件失效的問題

總結(jié)

以上所述是小編給大家介紹的JS模擬瀏覽器實(shí)現(xiàn)全局搜索功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論