html關鍵字有哪些?最近項目做暈頭，一個接一個，其中遇到這樣的一個功能，在網頁中高亮關鍵字的實現方法，下面小編把實現代碼及解決方案分享給大家，感興趣的的朋友跟随小編一起看看吧，我來為大家講解一下關于html關鍵字有哪些?跟着小編一起來看一看吧!

html關鍵字有哪些

最近項目做暈頭，一個接一個，其中遇到這樣的一個功能，在網頁中高亮關鍵字的實現方法，下面小編把實現代碼及解決方案分享給大家，感興趣的的朋友跟随小編一起看看吧

最近做項目遇到這樣的一個功能：在網頁中高亮關鍵字。

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

常用做法：正則替換

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

const regex = new RegExp(keyword,"g") element.innerHTML = element.innerHTML.replace(regex,"<b class="a">" keyword "</b>") element.classList.add("highlight")

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

()\ div <div id="parent"> <div class="test">test</div> </div>

關鍵字父節點 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,"<br>" text </br>) })// 對提取的标簽内文本進行關鍵字替換

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

<div dataset="p>d">替換</div>

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

<div id="keyword">keyword</div> =》将閉合标簽用變量替換 [replaced1]keyword[replaced2]//閉合标簽内 id="keyword" 不會被處理 =》 [replaced1]<b>keyword</b>[replaced2] =》将暫存變量 replaced 替換為原先标簽 <div id="keyword"><b>keyword</b></div>

• 這種思路及源碼從這裡來， 但存在問題是：
• 如果 [replaced1] 包含 keyword, 那麼替換時将發生異常

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

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

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

<div id="parent"> keyword 1 <span id="child"> keyword 2 </span> </div>

通過 parent.childNodes 得到所有子節點。child 節點可以通過 innerText.replce(keyword,result) 的方式替換得到想要的高亮效果,如下： <span id="child"><b>keyword</b> 2</span> （遞歸處理：當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 } } }

總結

以上所述是小編給大家介紹的HTML高亮關鍵字的完美解決方案，希望對大家有所幫助，

學習從來不是一個人的事情，要有個相互監督的夥伴，想要學習或交流前端問題的小夥伴可以私信“學習”小明加群獲取2019web前端最新入門資料，一起學習，一起成長！

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部