regexpがhtmlタグを見つけた

Question

jQueryを使って簡単な「検索機能」を書いた。ボックスにテキストを入力すると、検索したページのテキストが返されます。ただし、「the」という単語を入力すると、検索結果は<thead></thead>に戻り、「the」が強調表示されます。どうすればそれらのようなhtmlタグが見つからないようにすることができますか？私が 'edit'とタイプすると同様のことが起こり、イメージが 'edit ....'というイメージを返し、イメージが消えて 'edit'が強調表示されます。

私はそれがどこにあるのかと思うので、要素で始まる行でいくつかのことを試しました。

 function highliter(word, id){ 
      $('*').removeClass('highlight'); 
      var rgxp = new RegExp(word, 'g'); 
      var repl = '<span class="highlight">' + word + '</span>'; 
      var element = document.getElementById(id); 
      element.innerHTML = element.innerHTML.replace(/word/g, repl); 
      // element.innerHTML = element.innerHTML.replace(rgxp, repl); 

      $('html, body').scrollTop($(".highlight").offset().top - 126); 

Answer 1

正直言って、私はこの解決策に100％満足しているわけではありませんが、仕事をしてくれてうれしく思っています。ソースのどこにも発見される

• 最初のプロセステキストノード対象の単語が含まれており、そうである必要があり、特別なマークアップ（とそれを置き換えるすべての要素の：

  それは2つのステップで動作しますコード） -

• 正規表現とhtml（）メソッドを使用して、このマークアップを最終的な置換パターンに置き換えます（この部分は元のパターンと非常に似ています）

function highliter(word, id) { 
 
    var el = $('#' + id); 
 
    var repl = '<span class="highlight">' + word + '</span>'; 
 
    
 
    $('*').removeClass('highlight'); 
 
    recursiveMarker(word, el); 
 
    el.html(el.html().replace(/\[MY_MARKUP\]/g, repl)); 
 
} 
 

 
function recursiveMarker(word, parent) { 
 
    var rgxp = new RegExp(word, 'g'); 
 
    var repl = '[MY_MARKUP]'; 
 

 
    parent.find(':contains(' + word + ')').contents().each(function(key, el) { 
 
    if(this.nodeType == 3) { 
 
     el.data = el.data.replace(rgxp, repl); 
 
    } 
 
    else { 
 
     recursiveMarker(word, $(el)); 
 
    } 
 
    }); 
 
} 
 

 
highliter('div', 'container');

.highlight { 
 
    background-color:#ffff00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div>This is a div <span id="div">with a span whose id is 'div'</span></div> 
 
    <div>This is another div</div> 
 
</div>