HTML高亮关键字的完美解决方案

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>

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>)
})// 对提取的标签内文本进行关键字替换

<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>

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

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++
        }
    }  
}