Rob Rob - 6 months ago 20
jQuery Question

Set CSS of words enclosed in double quotes

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 quotes or double quotes, I want to set the color of the font to red and bold. Ex.

System.out.println( "Hello world" );
should set "Hello world" to red.

What's wrong: Despite my best efforts, I can't seem to get my control statements to work properly (at least I think that's the issue). It sets the first double quote and beyond to red, but when I tell it to stop when a word equals anyword" or anyword' it sets the rest of the code in the block to red.

HTML


<html>
<body>
<code id="java">
public static void main(String[] args)<br>
{
<pre> int i = 120; </pre><br>
<pre> // Displays a message in the console </pre>
<pre> // This is a test </pre>
<pre> System.out.println( "Hello Big World!" );</pre>
}
</code>
</body>
</html>





CSS


.quotes
{
font-weight: bold;
color: #E01B1B;
}





jQuery


$(document).ready(function() {
var code = $("#java").html(); // Get the code
var split = code.split(' '); // Split up each element
var chkQ = 0; // Check for quotes
var chkC = 0; // Check until end of comment line

// Set the CSS of reserved words, digits, strings, and comments
for (var j = 0; j < split.length; j++) {
// Check to see if chkQ is set to true
if (chkQ == 1) {
// If the element matches (anyword") or (anyword'), then set
// flag to false and continue checking the rest of the code.
// Else, continue setting the CSS to .quotes
if (split[j].match(/."/) || split[j].match(/.'/)) {
split[j] = '<span class="quotes">' + split[j] + '</span>';
chkQ = 0;
} else {
split[j] = '<span class="quotes">' + split[j] + '</span>';
}
}
...
} else if (chkQ == 0 && chkC == 0) {
...
// If the element matches a ("anyword) or ('anyword)...
} else if (split[j].match(/"./) || split[j].match(/'./)) {
split[j] = '<span class="quotes">' + split[j] + '</span>';
chkQ = 1;
} ...
}
}
// Join all the split up elements back together!
$("#java").html(split.join(' '));
});





Question: Is this just simply an issue with my regex, control blocks or something completely different?

Answer

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.