jQuery select partial text/chars and addClass or tag

How would one be able to select partial characters and add a class or add a tag to those characters/text using jQuery?

Here is code I have to play with:

<b><font class="pricecolor colors_productprice specialprice">
     <font class="text colors_text"><b>Regular Price:<br></b></font>
        $2,492.38
   </font>
</b>

<a class="pricecolor colors_productprice specialprice" href="javascript:void(0);">
<b><div id="emailprice">Click Here For Price!</div></b></a>

I want to make it something like this:

<font class="text colors_text"><b>Regular Price:<br></b></font>
    $2,492<sup>.38</sup>

How's this work for you?..

$(document).ready(function(){
    $('.pricecolor').html(
        $('.pricecolor').html().replace(/\.\d{1,2}/,
            function(a){
                return '<sup>' + a + '</sup>';
            })
    );
});

Fiddle here

Edit:

Here's what the regex is doing:

• \. - look for a dot
• \d{1,2} followed by one or two digits

Obviously the correct format would be two digits after the dot in which case the expression should simply be /\.\d{2}/, but I've seen some strange formatting on some sites, so decided to include that :)

Two lines of code...

parts = $('.pricecolor').html().split('.');
$('font.pricecolor').html(parts[0]+".<sup>"+parts[1]+"</sup>");

Maybe using some RegEx and replace() aplyed to innerHTML.