jquery - jQueryで変数とキーワードを強調表示する

Question

jQueryを使用してコードスニペットの変数とキーワードを強調表示しようとしています。このようなJavaスニペットがあるとします。

public class abc { 
  public static void main(String args[]) { 
    int count = 0; 

}
}

変数には「変数」、予約語には「キーワード」というボタンを使用しています。そのための方法はありますか？または、正規表現を使用する必要がありますか？

Answer 1

これは、段落内の一部のhtmlを次のように置き換えることに基づく解決策です。id=test

/* array of words to highlight */
var words = ['dummy', 'survived', 'desktop'];

$(function() {
    /* get html containing words to highlight*/    
    var wordsHtml = $('#test').html();
    $.each(words, function(idx, word) {
        var reg = new RegExp(word, 'g');
        /* replace word with a span containing word ,use css to "highlight" class*/
        wordsHtml = wordsHtml.replace(reg, '<span class="highlight">' + word + '</span>');
    });
    /* replace old html with new*/
    $('#test').html(wordsHtml);

})

デモ：http：//jsfiddle.net/pjBuY/