Question

I have this jQuery snippet, I have stored the variables to highlight them.

    var words= ['Sample','count'];
    var keywords = ['import','public','class','static','void','for','if','else'];
    $(document).ready(function() {
    if (#showVariables).click(function(){
        var wordsHtml = $('#identifier').html();
        $.each(words, function(idx, word) {
        var reg = new RegExp(word, 'g');
        wordsHtml = wordsHtml.replace(reg, '<span class="highlight">' + word + '</span>');
        })
        $('#identifier').html(wordsHtml);
    });


}); 

This is the html which might help,

<div id="menuDiv"><span id="showVariables" class="button">Variables</span><span id="showKeywords" class="button">Keywords</span></div>
<div id="codeDiv">
<br><span class="keyword">import</span> java.io.*;
<br>
<br><span class="keyword">public</span> <span class="keyword">class</span> <span class="identifier">Sample</span> {

<br>&nbsp;&nbsp;<span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> main(String args[]) {
<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>int</span> <span class="identifier">count</span> = 0;

I am trying to highlight keywords and identifiers. Where I might be wrong?

Answer 1

Demo http://fiddle.jshell.net/rG6F9/13/ (click on varaibles text and you will see before and after alerts for HTML.

Highlight will work fine here: http://fiddle.jshell.net/8axss/20/ (I have cleaned up your html as well script)

Hiya, multiple things are not correct:

1) $('#showVariables').click(function()

2) .identifier is a class so use ..

3) identifier should be placed as the outter most span which was earlier only places for Sample.

Rest please see Jquery and html below.

Hope this helps,

code

var words = ['Sample', 'count'];
var keywords = ['import', 'public', 'class', 'static', 'void', 'for', 'if', 'else'];
$(document).ready(function() {
    $('#showVariables').click(function() {
        alert($('.identifier').html());
        var wordsHtml = $('.identifier').html();
        $.each(words, function(idx, word) {
            var reg = new RegExp(word, 'g');
            wordsHtml = wordsHtml.replace(reg, '<span class="highlight" style="backgroun-color:yellow;">' + word + '</span>');

        })
           alert(" AFter HTML highlight == " + wordsHtml);
        $('#identifier').html(wordsHtml);
    });


});

HTML

<div id="menuDiv"><span id="showVariables" class="button">Variables</span><span id="showKeywords" class="button">Keywords</span></div>
<div id="codeDiv">
<br><span class="keyword">import</span> java.io.*;
<br>
<br><span class="keyword">public</span> <span class="keyword">class</span> <span class="identifier">Sample {

<br>&nbsp;&nbsp;<span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> main(String args[]) {
<br>&nbsp;&nbsp;&nbsp;&nbsp;</span>int</span> <span class="identifier">count</span> = 0;
</span>