Change text color based on value with developer console

Question

I'm trying to change text color from a public website based on letter value. I don't own the web site so I have to use the console from developer tool. I was wondering what js script could be written in the console so the letters from a DNA sequence could be more easy to read like in this picture : https://www.researchgate.net/publication/2753662_New_Approaches_In_Mathematical_Biology_Information_Theory_And_Molecular_Machines/figures?lo=1

Example of code:

function changecolor(){
For each letters in page{
if letter = A then textcolor = red
elseif letter = T then textcolor = bleu
elseif letter = G then textcolor = green
elseif letter = C then textcolor = yellow
else textcolor = black
}
}

I don't know if it's possible to do such a task because there is more than a million character on this page

thanks for your time

#########################EDIT######################### here's the HTML:

<html><head>
<title>Multiple sequence alignment by MAFFT ver.7</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="-1">
<link rel="stylesheet" href="../x.css?jul23" type="text/css">
<link rel="shortcut icon" href="../favicon.ico">
<script type="text/javascript" async="" src="https://www.google-analytics.com/plugins/ua/linkid.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script type="text/javascript">
<!--
function disp( address ){
    if(window.confirm('The alignment will be sent to guidance.tau.ac.il.')){
        window.open( address );
    }
}

// -->
</script>
<script type="text/javascript" src="ga.js"></script>
</head>
<body id="b">
<div id="m">
<a href="_out.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.aln" target="_blank" download="_out.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.aln">Clustal format</a>
|
<a href="_out.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.pir" target="_blank" download="_out.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.fasta">Fasta format</a>
|
MAFFT result
|
<a href="_view.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.html">View</a>
|
<a href="_nj.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.html">Tree</a>
|
<a href="_pickmod.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.html">Refine dataset</a>
|
<a href="../" target="_top">Return to home</a>
<p>
<input type="button" value="View" onclick="window.open('_view.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.html','_self')">
</p><p>
<input type="button" value="Reformat" onclick="window.open('_readseq.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.html','_blank'); ga('send','event','Readseq','cgi','Readseq');"> to GCG, PHYLIP, MSF, NEXUS, uppercase/lowercase, <i>etc.</i> with Readseq
</p><p>
<input type="button" value="GUIDANCE2" onclick="disp('http://guidance.tau.ac.il/index_FromMAFFT.php?run=_out.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal&amp;args= --inputorder --auto input '); ga('send','event','Guidance','cgi','Guidance');"> computes the residue-wise confidence scores and extracts well-aligned residues. 
</p><p>
<input type="button" value="Refine dataset" onclick="window.open('_pickmod.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.html','_self')">
</p><p>
<input type="button" value="Phylogenetic tree" onclick="window.open('_nj.22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal.html','_self')">
</p><p>

</p><p>

</p><p>

</p><p>

</p><p>

</p><p>
</p><h3>MAFFT-<a href="#method">L-INS-i</a> Result</h3><pre>CLUSTAL format alignment by MAFFT (v7.505)


seq1            aggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatctttgatgt
seq2            aggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatctttgatgt
                ************************************************************

seq1            caaaatcaggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatct
seq2            caaaatcaggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatct
                ************************************************************

seq1            ttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagtttacactc
seq2            ttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagtttacactc
                ************************************************************

seq1            ctaatctttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagtt
seq2            ctaatctttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagtt
                ************************************************************

seq1            tacactcctaatctttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaa
seq2            tacactcctaatctttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaa
                ************************************************************

seq1            ttcagtttacactcctaatctttgatgtcaaaatcaggttacgtcagtagctagctcgag
seq2            ttcagtttacactcctaatctttgatgtcaaaatcaggttacgtcagtagctagctcgag
                ************************************************************

seq1            aattaaattcagtttacactcctaatctttgatgtcaaaatcaggttacgtcagtagcta
seq2            aattaaattcagtttacactcctaatctttgatgtcaaaatcaggttacgtcagtagcta
                ************************************************************

seq1            gctcgagaattaaattcagtttacactcctaatctttgatgtcaaaatcaggttacgtca
seq2            gctcgagaattaaattcagtttacactcctaatctttgatgtcaaaatcaggttacgtca
                ************************************************************

seq1            gtagctagctcgagaattaaattcagtttacactcctaatctttgatgtcaaaatcaggt
seq2            gtagctagctcgagaattaaattcagtttacactcctaatctttgatgtcaaaatcaggt
                ************************************************************

seq1            tacgtcagtagctagctcgagaattaaattcagtttacactcctaatctttgatgtcaaa
seq2            tacgtcagtagctagctcgagaattaaattcagtttacactcctaatctttgatgtcaaa
                ************************************************************

seq1            atcaggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatctttga
seq2            atcaggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatctttga
                ************************************************************

seq1            tgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagtttacactcctaa
seq2            tgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagtttacactcctaa
                ************************************************************

seq1            tctttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagtttaca
seq2            tctttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagtttaca
                ************************************************************

seq1            ctcctaatctttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattca
seq2            ctcctaatctttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattca
                ************************************************************

seq1            gtttacactcctaatctttgatgtcaaaatcaggttacgtcagtagctagctcgagaatt
seq2            gtttacactcctaatctttgatgtcaaaatcaggttacgtcagtagctagctcgagaatt
                ************************************************************

seq1            aaattcagtttacactcctaatctttgatgtcaaaatcaggttacgtcagtagctagctc
seq2            aaattcagtttacactcctaatctttgatgtcaaaatcaggttacgtcagtagctagctc
                ************************************************************

seq1            gagaattaaattcagtttacactcctaatctttgatgtcaaaatcaggttacgtcagtag
seq2            gagaattaaattcagtttacactcctaatctttgatgtcaaaatcaggttacgtcagtag
                ************************************************************

seq1            ctagctcgagaattaaattcagtttacactcctaatctttgatgtcaaaatcaggttacg
seq2            ctagctcgagaattaaattcagtttacactcctaatctttgatgtcaaaatcaggttacg
                ************************************************************

seq1            tcagtagctagctcgagaattaaattcagtttacactcctaatctttgatgtcaaaatca
seq2            tcagtagctagctcgagaattaaattcagtttacactcctaatctttgatgtcaaaatca
                ************************************************************

seq1            ggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatctttgatgtc
seq2            ggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatctttgatgtc
                ************************************************************

seq1            aaaatcaggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatctt
seq2            aaaatcaggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatctt
                ************************************************************

seq1            tgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagtttacactcc
seq2            tgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagtttacactcc
                ************************************************************

seq1            taatctttgatgtcaaaatc----------------------------------------
seq2            taatctttgatgtcaaaatcaggttacgtcagtagctagctcgagaattaaattcagttt
                ********************                                        

seq1            ---------------------------
seq2            acactcctaatctttgatgtcaaaatc
                                           </pre>
<h3 id="method">Method</h3>
L-INS-i (Probably most accurate, very slow)
<pre>% mafft --inputorder --auto input 
</pre><p>References:<br>&nbsp;&nbsp;&nbsp;<a href="../gotonar2002.html" target="_top">Katoh <i>et al</i>. (2002)</a> describes FFT-NS-1, FFT-NS-2 and FFT-NS-i.<br>&nbsp;&nbsp;&nbsp;<a href="../gotonar2005.html" target="_top">Katoh <i>et al</i>. (2005)</a> describes G-INS-i, L-INS-i, E-INS-i and Mafft-homologs.
<br>&nbsp;&nbsp;&nbsp;<a href="../gotobmc2008.html" target="_top">Katoh and Toh (2008)</a> describes Q-INS-i.
<br>&nbsp;&nbsp;&nbsp;<a href="../gotobioinfo2012.html" target="_top">Katoh and Frith (2012)</a> describes *-fragment.
<br>&nbsp;&nbsp;&nbsp;Q-INS-i uses the McCaskill routine from the Vienna RNA package (<a href="../gotoviennarna.html" target="_top">Hofacker <i>et al</i>. 2003</a>) and MXSCARNA (<a href="../gotomxscarna.html" target="_top">Tabei <i>et al</i>. 2008</a>).
<br>&nbsp;&nbsp;&nbsp;<a href="../gotoaleaves.html" target="_top">Kuraku <i>et al</i>. (2013)</a> outlines this web service.
<br>&nbsp;&nbsp;&nbsp;<a href="../jump.html?http://www.ncbi.nlm.nih.gov/pubmed/27153688" target="_top">Katoh and Standley (2016)</a> describes the VSM technique (<tt>--unalignlevel <i>x</i></tt>).
<br>&nbsp;&nbsp;&nbsp;<a href="../jump.html?http://www.ncbi.nlm.nih.gov/pubmed/27378296" target="_top">Yamada <i>et al</i>. (2016)</a> explains how to build large MSAs.
<br>&nbsp;&nbsp;&nbsp;<a href="../jump.html?http://www.ncbi.nlm.nih.gov/pubmed/31062021" target="_top">Rozewicki <i>et al</i>. (2019)</a> describes the <tt>--dash</tt> option.
</p><p>MAFFT home:
<br>&nbsp;&nbsp;&nbsp;<a href="../gotomafft.html" target="_top">https://mafft.cbrc.jp/alignment/software/
</a>
</p><p><input type="button" value="Page Top ↑↑" onclick="document.body.scrollTop=0;"><br>
</p><div class="linedake"></div>
id = .22082707153259212NpqrYwCIsZlcAQmoRhnlsfnormal, posted at Sat Aug 27 07:15:58 JST 2022
<br>2 nucleotide sequences, 1407-1340 sites input
<br>This file will be removed after 96 hours.
</div>


</body></html>

You may not own the website, but you can certainly show us some of the representative HTML of the part(s) of the page you're trying to colour; without this information how do you expect us to help you? — David Thomas, Aug 26 '22 at 21:50
@DavidThomas Hi, sorry for this missing part. The web site is https://mafft.cbrc.jp/alignment/server/ . In Input you have to put two sequence (eg: >seq1 aggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatctttgatgtcaaaatc >seq2 aggttacgtcagtagctagctcgagaattaaattcagtttacactcctaatctttgatgtcaaaatc) and after alignment you'll see the text zone. — Vincent Coulombe, Aug 26 '22 at 21:59
We don't need to visit the site, though Konrad may well be happy to use the link; what we need is the relevant HTML of what you're trying to work with, which doesn't appear to be on that page. If that page generates the HTML based on your input, then input the data and copy a relevant, representative part of the DOM and paste it here in your question. — David Thomas, Aug 26 '22 at 22:03
@DavidThomas I was wondering if that pdf with images instead of text is what OP want to be changed, but I see it will be actual text — Konrad, Aug 26 '22 at 22:04
@DavidThomas i've updated my post. I hope it will help. Thank you for your time. — Vincent Coulombe, Aug 26 '22 at 22:28

pepa z depa · Answer 1 · 2023-07-06T10:08:07.537

0

You can set opacity for every text element using this in CSS

color: rgba(0,0,0,0);

And to background set some rainbow image.

All this can be done in js.

Also this can help.

edited Jul 06 '23 at 10:08

answered Aug 26 '22 at 21:26

pepa z depa

29
4

I believe that each letter should have one color assigned – Konrad Aug 26 '22 at 22:02
See added link. – pepa z depa Aug 27 '22 at 07:55

score 0 · Accepted Answer · answered Aug 27 '22 at 00:11

I finaly found how to change individual color of each letters based on the value of your charater: Javascript to change font colour based on value

Here is my code to put in the console:

var candidates = 'pre';

var candidateContainers = document.querySelectorAll(candidates);

var red = 'aA';
    var ora = 'tT'
    var blu = 'gG';
    var pur = 'cC';
    var all = red + ora + blu + pur;
    var char;
candidateContainers.forEach(function(entry) {
    var str = entry.innerHTML;
    
    
    
    var newStr = "";
    for (var i = 0; i < str.length; i++) {
      char = str.charAt(i);
      if(all.indexOf(char) == -1){
       // console.log("do nothing", char);
         newStr += char;
      }
       if(red.indexOf(char) > -1){
         newStr += wrapSpan('lightpink', char);
      }
      if(ora.indexOf(char) > -1){
         newStr += wrapSpan('gold', char);
      }
      if(blu.indexOf(char) > -1){
         newStr += wrapSpan('lightskyblue', char);
      }
      if(pur.indexOf(char) > -1){
         newStr += wrapSpan('palegreen', char);
      }
     
    }
    
    entry.innerHTML = newStr;
    
});




function wrapSpan(colour, char){
    return '<span style="background-color: ' + colour + '">' + char + '</span>';
}

Change text color based on value with developer console

2 Answers2