automatic and fast function to colorize letters in DNA sequence

--Hi,

i'm biologist and i try to make a fast method or a function in javascript to automatic
colorize each bases of my DNA sequence, but i'm not a specialist and i need somebody help.
For example i 've a text sequence not formated(single color) as:

ATGTCTGATGCACCACTTCTCGGTTATGTGGAGAGGCAGGGCAAGCTCAGCTGTATTGTAGCTGGACTAA
AGGGGAAGCTCAGCAATTCGGAGTTAANNGTTAATCAAGCCAGACATTATCTGCAAAGCAATTCCGAGAG
GTGGAAAAACAACCACAACAAAAATAACCCAGGATCTCATTACTCTTGTCAGCTAAACGCTTTAAAAGAT
TCTTGGAAA*CCAGTCACAAGGACGGCAGAGTTTCTGATGACATCAAGAAGGTGGTGAAGCAGGCATCCA
AGGGCCCACTAAAGGGCATCCTGGGCTACACTGAGGACCAGGTTGTCTCCTGTGACTTCAACAGCAACTC
CCACTCTTCCACCTTTGATGCTGGGG*TGGCATTGCTCTCAATGACAACTTTGTAAAGCTCATTTCCTGG
TATGACAATGAATACGGCTACAGCAACAGGGTGGTGGACCTCATGGCTTACATGGCCTCCAAGGAGTAA

the javascript function must color:
- all letters A in blue,
- all letters T in red,
- all letters G in green,
- all letters C in purple,
and all others letters stay unchanged (black).

the formatted sequence need to be loaded as soon as the page is opened.

thank you for your help.

mslider

 

example here:
http://www.jsfiddle.net/TUBD7/2/

var highlightDNA = function(targetElement) {
    var mapper = {
        A: "blue",
        T: "red",
        G: "green",
        C: "purple"
    }, dna = targetElement.innerHTML;
    
    for(var key in mapper) {
        dna = dna.replace(new RegExp(key,"g"), "<span class='"+mapper[key]+"'>"+key+"</span>");
    }
    
    targetElement.innerHTML = dna;
};

// need to pass it the element that contains the sequence:
highlightDNA(document.getElementById("sequence"));

Code (javascript):

make sure you get the CSS as well:

#sequence {
    font-family: courier;
    font-size: 12px;
    font-weight: bold;
}

span.blue {
    color: blue;
}

span.red {
    color: red;
}

span.green {
    color: green;
}

span.purple {
    color: purple;
}

HTML:

good luck