Colour manipulation of custom tags in niceEdit HTML editor ( JS / DOM )

Question

Hi,

I would like to be able to highlight, during typing and in real time, certain custom tags in the format #tag_name# within the text of a nicEdit instance ( http://nicedit.com/ ).

My current attempt to implement as close to this as possible revolves around using the blur event of the editor to highlight the tags once the editor loses focus. I then use the following logic to wrap the tags in a span with a highlight class..

htmlEditor.addEvent( "blur", function( ) {
    str = nicEditors.findEditor( "html_content" ).getContent( );
    // Remove existing spans first, leaving just the tag ( this could mess up if the html has been edited directly )
    str = str.replace( /(<span class=\"highlight\">)(.[^<]+)(<\/span>)/gi, "$2" );
    // Then wrap all instances of a particular tag with the highlight span      
    str = str.replace( /#tag_name#/gi, "<span class='highlight'>#tag_name#</span>" );
    nicEditors.findEditor( "html_content" ).setContent( str );
});

This is not ideal as my actual text now contains unwanted spans ( I only want the highlighting for the user's input experience, not to be saved to the database ). Obviously I could remove the spans before saving the text but the whole system is currently open to errors ( If the html is directly edited then other text may get highlighted etc ).

What I would like to know is..

Is there any way to directly change the colour of the tags in the editor or DOM without using a mechanism such as this? Perhaps a way of colouring the text in memory rather than changing the HTML ?

Any ideas ?

Regards

Chris P