JavaScriptで部分文字列を強調表示しようとしています

Question

要素内で（部分）、部分文字列を見つけて強調表示するJS関数を記述したいと思います。要素内の部分文字列が最初に出現するために必要なのです。私はちょうど私のブログでいくつかのキーワードを強調表示しようとしています。

はJavaScript

function highlight(s, search) { 
    return s.replace(new RegExp(
     search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi' 
    ), '<b>$&</b>'); 
} 

注オブジェクト[ 'ハイライト']私は私のRuby on Railsのコード内へのアクセス権を持っているオブジェクトであるが - ここで

は、私がこれまで試してみましたものです。

HTML

<div> 
    <table> 
    <thead> 
     <tr> 
     <th>...</th> 
     </tr>  
    </thead> 
    <tbody> 
     <tr> 
     <td class="test">This element contains text to be highlighted</td> 
     <script>highlight($('test').html(), <% object['highlight'].first %>)</script> 
     </tr> 
    </tbody> 
    </table> 
</div> 

私はこのコードを実行しようとすると、何も強調表示されません。

私がここで間違って行ったことは誰にでも見られますか？

ありがとうございます。

Answer 1

テキストをtdに追加し直す必要があります。

<table> 
    <thead> 
    <tr> 
     <th>...</th> 
    </tr>  
    </thead> 
    <tbody> 
    <tr> 
     <td class="test"> 
     This element contains text to be highlighted 
     <script>highlight('.test', '<%= object['highlight'].first %>')</script> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Javascriptの一部

<script> 
    function highlight(s, search) { 
    text = $(s).html(); 
    modifiedText = s.replace(new RegExp(
     search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi' 
    ), '<b>$&</b>'); 
    $(s).html(modifiedText); 
} 
</script> 

編集：

これはOPの質問に答えるかもしれないにもかかわらず、これはをお勧めしません。 thisまたはthis

Answer 2

mark.jsをご覧ください。キーワード/用語やカスタム正規表現を強調表示できます。 jQueryプラグインとしても利用できます。

DEMO：JSFIDDLE

var context = document.querySelector(".test"); 
 
var instance = new Mark(context); 
 
// "text" is '<% object['highlight'].first %>' 
 
instance.mark("text");

mark{ 
 
    background: yellow; 
 
    color: black; 
 
}

<div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>...</th> 
 
     </tr>  
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td class="test">This element contains text to be highlighted</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/mark.min.js"></script>