JSFiddle - React, Tailwind, and code Playground
HTML
<span>Source:</span><textarea id=source>TCACCGGCTTCGGATTACGATCCCATGCGGTCTCGATCGATTCCCCTTGGGGAAATCTATCTTCAGAATTCG</textarea>
<span>Result:</span><textarea id=result></textarea>
CSS
*[id]
{
display:block;
color: red;
margin-left:10px;
width:90%
}
JavaScript
function DNA(strand) {
return strand
.concat("||TACG")
.replace(/[aA](?=.*?(T))|[tT](?=.*?(A))|[cC](?=.*?(G))|[gG](?=.*?(C))|\|\|....$/g, "$1$2$3$4");
}
updateText = function() {
var source = $("#source").val();
$("#result").text(DNA(source));
}
updateText();
$("#source").bind('input propertychange',updateText);