Javascript to change font colour based on value

Question

Quick background - I have dyslexia and it can be challenging sometimes looking at certain phrases or numbers to not mix things up, so I've been told to use colour to fix this. Full disclosure, I am not a programmer, but I spoke to one of the developers at work, and they said that they can probably hack something together for me to help out if I can provide them with some base Javascript code to work off.

Is someone able to assist? I have no idea what I'm looking for or what to search for. I found this, but I think it needs to be more complex.

Basically, I want letters to be one colour, symbols to be another colour, numbers a third colour, then my "bad" characters highlighted in something else.

Bad Characters

• E / 3 = Red / Orange
• L / I = Red / Orange

Other characters

• A - Z = Black
• 1 - 9 = Blue
• ! - ) = Purple

I hope this makes sense. Feel free to ask me any questions.

Thank you sincerely.

Update: To clarify, there is a box where passwords are generated and I need to transcribe that password into an application that does not accept copy/paste. It is a single phrase/area with no hyperlinks at all.

Answer 1

You do realise what you want is not straight forward!

What if you have a hyperlink inside a paragraph? What if the HTML is malformed?

You said your developer needs something to start with so the below will hopefully give him a base to work from.

Basically we grab all the likely candidates for text nodes (headings and a paragraph, you can extend this to other items).

Then we loop all candidates and check each character. We check if the character compares to anything from our special character list (var all). If they don't we just add them to a string to replace later.

If they do match any one of our special lists we then wrap them in a span with the relevant colour using wrapSpan function.

Once we have checked the whole string for a candidate we then replace the inner HTML for that candidate.

**There is a LOT of work you would have to do with this to make it functional due to the complexities of HTML and the below is very inefficient, but it should give you an idea of where to start.

var candidates = 'h1,h2,h3,h4,h5,h6,p';

var candidateContainers = document.querySelectorAll(candidates);

var red = 'EL';
    var ora = '3I'
    var blu = '124567890';
    var pur = '!';
    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('red', char);
      }
      if(ora.indexOf(char) > -1){
         newStr += wrapSpan('orange', char);
      }
      if(blu.indexOf(char) > -1){
         newStr += wrapSpan('blue', char);
      }
      if(pur.indexOf(char) > -1){
         newStr += wrapSpan('purple', char);
      }
     
    }
    
    entry.innerHTML = newStr;
    
});




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



//console.log(candidateContainers);

<h1>THIS SENTENCE CONTAINS LETTERS THAT SHOULD BE HIGHLIGHTED SUCH AS E and 3!</h1>
<p>This sentence contains the numbers 1,2,3,4,5,6,7,8,9 and 3 should be a different colour, the exclamantion point should also be a different colour!</p>
<p>This is as simple as it gets as you can see if fails on this sentence due to an existing <a href="http://test123.com">hyperlink</a></p>

Answer 2

Unfortunately there's no CSS selector to target specific chars which would have been useful in this case.

This is an interesting problem to understand people with dyslexia needs.

Some simple Javascript can make it like the following code. All you have to do is enclosing each character type with the correct marker.

Working with a configuration array containing your needs based on regular expression is the way to do. In the code below I used color keys for the object, but they are used as CSS identifier (which is not considered appropriate by everybody)

function color_format(ch) {
   var config={
    'red' : /[EL]/,
    'orange': /[3l]/,
    'black' : /[a-zA-Z]/,
    'blue' : /[0-9]/,
    // purple is the default color for non matching chars
   };
   res=cur='';
   
   for (var i=0;i<ch.length;i++) {
    match = "";
   
    Object.keys(config).every(key => {
        if (ch[i].match(config[key])) {
        match += " " + key;
        return false;
      }
      return true;
    });
    
    match=match.trim();
    if (match != cur) {
        if (cur) {
            res += "</span>";
      }
      if (match) {
        res+= "<span class='" + match + "'>";
      }
      cur=match;
    }
    res+=ch[i];
   }
   if (cur) res+='</span>';
   return res;
}

document.getElementById("new-password").addEventListener("click",function(e){
   // the two following lines are only used to generate a random password for the example
   var s = "!(),;:.'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
   password=Array.apply(null, Array(10)).map(function() { return s.charAt(Math.floor(Math.random() * s.length)); }).join('');
   document.getElementById("password-container").innerHTML=color_format(password);
});

#password-container {
  color: purple;
  font-family: monospace;
  font-size: 3em;
}
#password-container .black {
  color: black;
}
#password-container .orange {
  color: orange;
}
#password-container .blue {
  color: blue;
}
#password-container .red {
  color: red;
}

Your new password is : <div id="password-container">

</div>

<button id="new-password">
Generate password
</button>