Italicizing The Letter G

This page was created in response to this question on the WordPress support forum. The following Javascript code was used to add span tags with the class custom-letter around the G’s and g’s in the page title. Note that italic tags <i> could have been used instead, but using span tags with a class assigned to them allows the developer to not only add italics, but other styling like font weight, colors, underlining, etc., without having to constantly change the code.

<style>
   .custom-letter {
      font-style: italic;
   }
</style>
<script type="text/javascript">
<!--
jQuery(document).ready(function($){
   // Initialize variables
   var iLetter = 0;
   var iLength = 0;
   var cLetter = 'a';
   var strNewTitle = "";

   // Capture the page title from only pages, not posts
   var strTitle = $("body.page .entry-title").text();

   // Capture the length of the title
   iLength = strTitle.length;

   // Step through each letter of the post title
   for(iLetter = 0; iLetter < iLength; ++iLetter)
   {
      // Look at the letter at the particular position
      cLetter = strTitle.charAt(iLetter);

      // Is the letter one of the ones we're looking for?
      if((cLetter == 'g') || (cLetter == 'G'))
      {
         // Add the span tags around the target letter
         // before adding it to the new title
         strNewTitle += '<span class="custom-letter">' + cLetter + "</span>";
      }
      else
      {
         // Not one we're looking for, just add it to the new title
         strNewTitle += cLetter;
      }
   }
   // All done, output the new title
   $("body.page .entry-title").html(strNewTitle);
});
//--></script>