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&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> <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> <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> <a href="../gotobmc2008.html" target="_top">Katoh and Toh (2008)</a> describes Q-INS-i.
<br> <a href="../gotobioinfo2012.html" target="_top">Katoh and Frith (2012)</a> describes *-fragment.
<br> 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> <a href="../gotoaleaves.html" target="_top">Kuraku <i>et al</i>. (2013)</a> outlines this web service.
<br> <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> <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> <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> <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>
2 answers
solution1
0 2022-08-26 21:26:36
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 do in js.
Also this can help.
solution2
0 2022-08-27 00:11:37
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>';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Change text color based on td value
Ajax - change text color based on return value
Dynamically change the color or text based on value with Javascript
I want to change color of text in a table loop based on text value
How to change color of text based on text-value by using css?
How to change the text color based on the text value inside a paragraph
Change Text And Background Color Of Table Cell Based On Text Value
Jquery - Change span text color based on numeric value
How do you change the text color of a div based on its value?
DJANGO - Change text color based on value (HTML & JS)
Related Tags