HTMLでキーワードを強調表示するのに最適なソリューション

const regex = 新しい RegExp(キーワード、"g")
element.innerHTML = element.innerHTML.replace(正規表現、"<b class="a">"+キーワード+"</b>")
element.classList.add("ハイライト")

（）\
分割
<div id="親">
    <div class="test">テスト</div>
  </div>

var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // キーワードに含まれる / などの特殊文字をエスケープします。
var finder = new RegExp(">.*?"++".*?<") // クラスやIDなどの誤操作を避けるためにタグ内のテキストを抽出します。 element.innerHTML = element.innerHTML.replace(finder,function(matched){
        matched.replace(text,"<br>"+text+</br>) を返します
}) // 抽出したタグテキスト内のキーワードを置き換える

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

<div id="keyword">キーワード</div>
  =》終了タグを変数 [replaced1] キーワード [replaced2] に置き換えます // 終了タグ内の id="keyword" は処理されません =》
  [置換1]<b>キーワード</b>[置換2]
  =》一時変数を元のタグ <div id="keyword"><b>keyword</b></div> に置き換えます

<div id="親">
    キーワード1
  <span id="子">
    キーワード2
  </span>
 </div>

const reg = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
ハイライト = 関数 (ノード、reg){
    if (node.nodeType == 3) { //テキストノードのみ処理 const match = node.data.match(new RegExp(reg));
        （一致）の場合{
          const highlightEl = document.createElement("b");
          highlightEl.dataset.highlight="y"
          定数 wordNode = node.splitText(match.index)
          wordNode.splitText(match[0].length); // 最初のキーワードと最後の3つのテキストノードに分割します。const wordNew = document.createTextNode(wordNode.data);
          highlightEl.appendChild(wordNew);//ハイライトノードが正常に構築されました wordNode.parentNode.replaceChild(highlightEl, wordNode);//テキストノードを置き換えます}
    } そうでない場合 (node.nodeType == 1 && node.dataset.highlight!="y"
    ）{
        (var i = 0; i < node.childNodes.length; i++) {
            ハイライト(node.childNodes[i], reg);
            私は++
        }
    }  
}