Set CSS of words enclosed in double quotes

Question

This is a follow up question to my question about Setting the CSS of code if it contains a reserved word.

What I am trying to do: If some code has quot

Answer 1

Here's a pure JavaScript version:
id= id of element with quotes
classid= class to add to the quotes

function quotes(id,classid) {
    var code  = document.getElementById(id).innerHTML; 
    var split = code.split('\"'); 
    for (var j = 0; j < split.length - 1; j++) {
        if (j%2 == 0) { 
            split[j] = split[j] + '<span class='+classid+'>"';
        } else {
            split[j] = split[j] + '"</span>';
        }
    }
    document.getElementById(id).innerHTML = split.join("");
    code  = document.getElementById(id).innerHTML;
    split = code.split('\'');
    var openQ = 1;
    var sub1;
    var sub2;
    for (var j = 0; j < split.length - 1; j++) {
        sub1 = split[j+1].substr(0,2);
        sub2 = split[j+1].substr(0,3);
        if(sub1 != "s " && sub2 != "ll ") {
          if (openQ) {
            split[j] = split[j] + '<span class='+classid+'>\'';
            openQ = 0;
          } else {
            split[j] = split[j] + '\'</span>';
            openQ = 1;
          }
        }
        else {
            split[j] = split[j] + '\'';
        }
    }
    document.getElementById(id).innerHTML = split.join("");
}

Answer 2

Why split the string up when you can perform a simple global regex find and replace:

<script type="text/javascript">
$(document).ready(function(){
//cache the element
   el = $('#java');
//get the HTML contained within the cached element
   code = el.html();
//return the code having executed the replace method, regex explained:
/*    
([^\w]{1}) -> look for a single character that is not an alpha character
(["']) -> then look for either a single quote or double quote
(.*?) -> then look any character, but don't be greedy
(\2) -> then look for what was found in the second group - " or '
([^\w]{1}) -> and finally look for a single character that is not an alpha character
*/
    code = code.replace(/([^\w]{1})(["'])(.*?)(\2)([^\w]{1})/gm,
//execute an anonymous callback, passing in the result for every match found
    function(match, $1, $2, $3, $4, $5, offset, original) {
//construct the replacement
        str =  $1 + '<span class="quotes">' + $2 + $3 + $4 + '</span>' + $5; 
//return the replacement
        return str; 
    });
//replace the existing HTML within the cached element
   el.html(code);
});
</script>

Edit: Just updated it to accommodate nested quotes.

Answer 3

I don't know all your requirements, but it seems that your single quote could get a bit complicated.

I've set up a demonstration that works (updated link to include nested quotes).

I do not guarantee it is bug free. It does the replacement in two stages, first for double quotes, then for single, trying to weed out potential apostrophes (note in the code below the filters for apostrophes are based off common following letters--not sure how many you might practically need, if any).

Javascript

$(document).ready(function() {
    var code  = $("#java").html(); // Get the code
    var split = code.split('\"');  // Split up each element at the "

    // Set the CSS of reserved words, digits, strings, and comments
    for (var j = 0; j < split.length - 1; j++) {
        if (j%2 == 0) { //if first, add beginning
            split[j] = split[j] + '<span class="quotes">"';
        } else {//if second, add ending
            split[j] = split[j] + '"</span>';
        }
    }
    // Join all the split up elements back together!
    $("#java").html(split.join(""));

    code  = $("#java").html(); // Get the code
    split = code.split('\'');  // Split up each element at the '
    var openQ = 1;
    var sub1;
    var sub2;

    for (var j = 0; j < split.length - 1; j++) {
        sub1 = split[j+1].substr(0,2); //checking for a contraction of 's
        sub2 = split[j+1].substr(0,3); //checking for a contraction of 'll
        if(sub1 != "s " && sub2 != "ll ") {
          if (openQ) { //if first, add beginning
            split[j] = split[j] + '<span class="quotes">\'';
            openQ = 0;
          } else {//if second, add ending
            split[j] = split[j] + '\'</span>';
            openQ = 1;
          }
        }
        else {//add apostrophe back
            split[j] = split[j] + '\'';
        }
    }
    $("#java").html(split.join(""));
});