JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="sequence">ATGTCTGATGCACCACTTCTCGGTTATGTGGAGAGGCAGGGCAAGCTCAGCTGTATTGTAGCTGGACTAA<br/>
    AGGGGAAGCTCAGCAATTCGGAGTTAANNGTTAATCAAGCCAGACATTATCTGCAAAGCAATTCCGAGAG<br/>
    GTGGAAAAACAACCACAACAAAAATAACCCAGGATCTCATTACTCTTGTCAGCTAAACGCTTTAAAAGAT<br/>
    TCTTGGAAA*CCAGTCACAAGGACGGCAGAGTTTCTGATGACATCAAGAAGGTGGTGAAGCAGGCATCCA<br/>
    AGGGCCCACTAAAGGGCATCCTGGGCTACACTGAGGACCAGGTTGTCTCCTGTGACTTCAACAGCAACTC<br/>
    CCACTCTTCCACCTTTGATGCTGGGG*TGGCATTGCTCTCAATGACAACTTTGTAAAGCTCATTTCCTGG<br/>
    TATGACAATGAATACGGCTACAGCAACAGGGTGGTGGACCTCATGGCTTACATGGCCTCCAAGGAGTAA</div>

CSS

#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;
}

JavaScript

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

highlightDNA(document.getElementById("sequence"));