HTML高亮關鍵字真麻煩

livem 發布于2019-08-02 11:47 / 420人閱讀

摘要：有這么一個功能在網頁中高亮關鍵字。如下當為時，會將名也錯誤的替換掉關鍵字父節點通過來進行背景染色處理，對原始有一定程度污染，可能對再次定位造成影響。

有這么一個功能：在網頁中高亮關鍵字。

本以為一個 innerHTML replace 就能實現的簡單操作，卻遇到了許多的問題。本文就記錄這些問題和最終的完美解決辦法，
希望能對有同樣遭遇的小伙伴有所幫助。只對結果感興趣的，忽略過程，直接跳過看結果吧~

常用做法：正則替換

思路：要想高亮元素，那么需要將關鍵字提取出來用標簽包裹，然后對標簽進行樣式調整。使用 innerHTML，或 outHTML, 而不能使用 innerText,outText。

const regex = new RegExp(keyword,"g")
element.innerHTML = element.innerHTML.replace(regex,""+keyword+"")
element.classList.add("highlight")

這樣做存在的隱患有如下：

keyword 如果是 () 等正則對象的關鍵字將會構建正則對象失敗。（可以通過轉義解決）

keyword 如果是一些 HTML 標簽如 div 將會對 innerHTML 進行錯誤的替換

keyword 如果和一些DOM屬性名、值相同，也會導致異常替換。如下當 keyword 為 test 時，會將 class 名也錯誤的替換掉：

  
    test

關鍵字父節點 element 通過 class 來進行背景染色處理，對原始DOM有一定程度污染，可能對 element 再次定位造成影響。（作為插件希望盡可能少改變原始DOM）

正則優化一：僅處理位于標簽內的元素

var formatKeyword = text.replace(/[-/^$*+?.()|[]{}]/g, "$&") // 轉義處理keyword包含的特殊字符，如 /.
var finder = new RegExp(">.*?"++".*?<") // 提取位于標簽內的文本，避免誤操作 class、id 等

element.innerHTML = element.innerHTML.replace(finder,function(matched){
        return matched.replace(text,"
"+text+
)
})// 對提取的標簽內文本進行關鍵字替換

以能解決大多數問題，但依舊存在的問題是,只要標簽屬性存在類似 < 符號，將會打破匹配規則導致正則提取內容錯誤, HTML5 dataset 可以自定義任意內容，故這些特殊字符是無法避免的。

  替換

正則優化二：清除可能影響的標簽

  keyword
  =》將閉合標簽用變量替換
  [replaced1]keyword[replaced2]//閉合標簽內 id="keyword" 不會被處理
  =》
  [replaced1]keyword[replaced2]
  =》將暫存變量 replaced 替換為原先標簽
  keyword

這種思路及源碼從這里來，
但存在問題是：

如果 [replaced1] 包含 keyword, 那么替換時將發生異常

最重要的，當標簽值中包含 <> 符號時，此方法也不能正確的提取標簽

總之在經過了N多嘗試之后，通過正則都沒能有效的處理各種情況。然后換了個思路，不通過字符串的方式，通過節點處理。element.childNodes 可以最有效的清理標簽內的干擾信息。

[完美解決方案]通過 DOM 節點處理

 
    keyword 1
  
    keyword 2

通過 parent.childNodes 得到所有子節點。child 節點可以通過 innerText.replce(keyword,result) 的方式替換得到想要的高亮效果,如下：
keyword 2
（遞歸處理：當child節點不含子節點時進行replace操作）。

但是 keyword 1 是屬于文本節點，只能修改文本內容，無法增加 HTML，更無法多帶帶控制其樣式。而文本節點也不能轉換為普通節點，這也是最苦惱的事情。

最后~，本文的重點來了，因為這個功能，讓我第一次認真接觸到了文本節點這個東西。從這里發現了Text對象，使用切割文本節點并替換的方式實現高亮。

源碼以及還原高亮見源碼

const reg = new RegExp(keyword.replace(/[-/^$*+?.()|[]{}]/g, "$&"))
highlight = function (node,reg){
    if (node.nodeType == 3) {  //只處理文本節點
        const match = node.data.match(new RegExp(reg));
        if (match) {
          const highlightEl = document.createElement("b");
          highlightEl.dataset.highlight="y"
          const wordNode = node.splitText(match.index)
          wordNode.splitText(match[0].length); // 切割成前 關鍵詞 后三個Text 節點
          const wordNew = document.createTextNode(wordNode.data);
          highlightEl.appendChild(wordNew);//highlight 節點構建成功
          wordNode.parentNode.replaceChild(highlightEl, wordNode);// 替換該文本節點
        }
    } else if (node.nodeType == 1 && node.dataset.highlight!="y"
    ) {
        for (var i = 0; i < node.childNodes.length; i++) {
            highlight(node.childNodes[i], reg);
            i++
        }
    }  
}

最后，留個彩蛋，以上方法也是存在一個小 bug 的，有興趣可以去發現一下。

云服務器 GPU云服務器關鍵詞高亮 html黃色高亮標簽 html頁面高亮設置高亮html編輯器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53115.html

HTML高亮關鍵字真麻煩

摘要：有這么一個功能在網頁中高亮關鍵字。如下當為時，會將名也錯誤的替換掉關鍵字父節點通過來進行背景染色處理，對原始有一定程度污染，可能對再次定位造成影響。有這么一個功能：在網頁中高亮關鍵字。本以為一個 innerHTML replace 就能實現的簡單操作，卻遇到了許多的問題。本文就記錄這些問題和最終的完美解決辦法，希望能對有同樣遭遇的小伙伴有所幫助。只對結果感興趣的，忽略過程，直接跳過...

LiuZh 2019-08-23 12:26 評論0 收藏0
基于Vue實現關鍵詞實時搜索高亮顯示關鍵詞

摘要：高亮顯示通過實現對關鍵詞的替換，通過添加實現關鍵詞高亮顯示匹配關鍵字正則高亮替換值在查詢到結果后執行方法將查詢出來的數據傳遞過來通過來將關鍵詞替換成標簽，同時用中的進行綁定。最近在做移動real-time-search于實時搜索和關鍵詞高亮顯示的功能，通過博客的方式總結一下，同時希望能夠幫助到別人~~~ 如果不喜歡看文字的朋友我寫了一個demo方便已經上傳到了github上，可以cl...

NusterCache 2019-08-22 18:50 評論0 收藏0
基于Vue實現關鍵詞實時搜索高亮顯示關鍵詞

摘要：高亮顯示通過實現對關鍵詞的替換，通過添加實現關鍵詞高亮顯示匹配關鍵字正則高亮替換值在查詢到結果后執行方法將查詢出來的數據傳遞過來通過來將關鍵詞替換成標簽，同時用中的進行綁定。最近在做移動real-time-search于實時搜索和關鍵詞高亮顯示的功能，通過博客的方式總結一下，同時希望能夠幫助到別人~~~ 如果不喜歡看文字的朋友我寫了一個demo方便已經上傳到了github上，可以cl...

xushaojieaaa 2019-08-30 15:54 評論0 收藏0
記錄微信小程序的坑

摘要：除官方外的參考文章微信小程序實例創建下發模板消息實例手把手教你開發微信小程序之模版消息開發教你突破小程序模板消息的推送限制獲取用戶信息接口的廢棄問題接口是獲取用戶信息昵稱，頭像等的接口，在官方文檔上寫是即將廢棄。 ----------------更新-------------- 2018年10月10日官網3個接口廢棄的通知： 1、分享監聽接口分享消息給好友時，開發者將無法從callba...

EastWoodYang 2019-08-23 12:02 評論0 收藏0