title: How to set text's colour based on a class/words in the text?
body: <p>I'm continuing on making a Loot Bot simulator and I've nearly finished the Item Log! The button works and lists the items collected. Now I want it to colour the text based on whether it was Normal, Rare, Epic or Legendary. It says what type of rarity it is at the start of it. Any easy ways? </p>
  
  <p>Also I want it to show the amount of Legendaries, Epics, Rares and Normals they have. It should be in the image below as well.</p>
  
  <p>The blue bit circled is what I want changing: </p>
  
  <p><img src="https://i.imgur.com/LIIB8Cz.jpg" alt="http://imgur.com/a/vrDNo"></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Home |OWLBS&lt;/title&gt;
  &lt;link rel="icon" type="image/png" href="favicon.png"&gt;
  &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="css/animate.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type=text/css&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700' rel='stylesheet' type='text/css'&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Raleway:400,600,700' rel='stylesheet' type='text/css'&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/chance.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/loot.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/spec-loot.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/engine.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;header&gt;
    &lt;nav&gt;
      &lt;div class="grid"&gt;
        &lt;div class="grid__item large--one-third logo"&gt;
            &lt;h1&gt;
              &lt;a href="index.html" class="logo"&gt;&lt;span class="loot"&gt;OW&lt;/span&gt;&lt;span class="junkie"&gt;LBS&lt;/span&gt;&lt;/a&gt;
              &lt;span class="version"&gt;This is not made by me, I edited another file!&lt;/span&gt;
            &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="grid__item large--two-thirds medium-down--hide nav"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="changelog.html"&gt;Changelog&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  
    &lt;div class="wrapper"&gt;
      &lt;div class="grid"&gt;
        &lt;div class="grid__item item-section"&gt;
          &lt;img id="box" src="images/loot-box.png" alt="Loot Box"&gt;
          &lt;ul id="crate"&gt;&lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="small-wrapper"&gt;
      &lt;div class="grid"&gt;
        &lt;div class="grid__item center"&gt;
          &lt;a class="btn yellow" onclick="openBox()" onmouseover="shakeBox()"&gt;OPEN LOOT BOX&lt;/a&gt;
          &lt;a class="btn blue btn-toggle" onclick="itemLog(this)" id="plus" href="#"&gt;Item Log &lt;i id="bt" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class="grid__item center"&gt;
          &lt;ul id="itemlog" style="display: none;" class="in-use"&gt;&lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="grid__item center stats"&gt;
        &lt;div class="grid center"&gt;
  
            &lt;div class="grid__item one-quarter small--one-whole"&gt;
              &lt;p&gt;Normal:  &lt;span id="white-stat"&gt;0&lt;/span&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid__item one-quarter small--one-whole"&gt;
              &lt;p&gt;Rare:  &lt;span id="blue-stat"&gt;0&lt;/span&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid__item one-quarter small--one-whole"&gt;
              &lt;p&gt;Epic:  &lt;span id="purple-stat"&gt;0&lt;/span&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="grid__item one-quarter small--one-whole"&gt;
              &lt;p&gt;Legendary:  &lt;span id="orange-stat"&gt;0&lt;/span&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="grid__item center"&gt;
          &lt;div class="note"&gt; Only for overwatch fans!&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS(engine): </p>
  
  <pre><code>var crate
  var openSound = new Audio('open-box.ogg');
  var results = [];
  var isRunning = false;
  
  $.fn.extend({
      animateCss: function (animationName) {
          var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
          $(this).addClass('animated ' + animationName).one(animationEnd, function() {
              $(this).removeClass('animated ' + animationName);
          });
      }
  });
  
  function itemLog(btn) {
    var hide = document.getElementById("itemlog")
    if (btn.id.match("plus")) {
        btn.id = "minus";
        hide.style.display = "block";
    }
    else {
      btn.id = "plus";
      hide.style.display = "none";
    }
  }
  
  function openBox(){
  
    if(isRunning == false){
      //Reset Crate
      results = [];
      setTimeout(delay,1750);
      setTimeout(hideBox,750);
      setTimeout(deleteCards,1050);
      openSound.play();
      $('#box').animateCss('bounceOutUp');
      $('#item0').animateCss('bounceOutUp');
      $('#item1').animateCss('bounceOutUp');
      $('#item2').animateCss('bounceOutUp');
      $('#item3').animateCss('bounceOutUp');
  
      isRunning = true;
    }
  }
  
  function deleteCards(){
    $( "#item0" ).remove();
    $( "#item1" ).remove();
    $( "#item2" ).remove();
    $( "#item3" ).remove();
  }
  
  function hideBox(){
    $( "#box" ).remove();
  }
  
  function delay(){
    setTimeout(setBox,250);
  
  }
  
  function setBox(){
  
  
    for(i = 0; i &lt; 3; i++){
      //Randomize Loot
      crate = chance.weighted(loot, weights);
      results.push(crate);
      console.log(crate);
    }
  
    cratespec = chance.weighted(specloot, specweights);
    results.push(cratespec);
  
    endresults = chance.shuffle(results);
    displayBox();
  
  }
  
  function displayBox(){
    //Add to list
    for(i = 0; i &lt; endresults.length; i++){
      var ul = document.getElementById("crate");
      var li = document.createElement("li");
      var span = document.createElement("span");
      var node = document.createElement("LI");    
      span.appendChild(document.createTextNode(endresults[i]));
      li.setAttribute("id", "item" + i);
      ul.appendChild(li);
      li.appendChild(span);
  
      //Check Quality and Strip
      var str = $("#item" + i).text();
      console.log(str);
      var textnode = document.createTextNode(str);  
      node.appendChild(textnode)
      document.getElementById("itemlog").appendChild(node);  
       if(endresults[i].indexOf("Normal") !=-1){
        $("#item" + i).addClass("normal animated bounceInDown");
        $("#item" + i ).find('span').text(str.substring(7));
      }
      if (endresults[i].indexOf("Rare") !=-1){
        $("#item" + i).addClass("rare animated bounceInDown");
        $("#item" + i).find('span').text(str.substring(5));
      }
      if(endresults[i].indexOf("Epic") !=-1){
        $("#item" + i).addClass("epic animated bounceInDown");
        $("#item" + i).find('span').text(str.substring(5));
      }
      if(endresults[i].indexOf("Lgnd") !=-1){
        $("#item" + i).addClass("legendary animated bounceInDown");
        $("#item" + i).find('span').text(str.substring(5));
      }
  
      //Check Hero
      //Generic
      if(endresults[i].indexOf("Spray") || endresults[i].indexOf("Coins") !=-1){
        $("#item" + i).addClass("generic");
      }
      //orisa
      if(endresults[i].indexOf("Orisa") !=-1){
        $("#item" + i).addClass("orisa");
      }
  
      //sombra
      if(endresults[i].indexOf("Sombra") !=-1){
        $("#item" + i).addClass("sombra");
      }
      //ana
      if(endresults[i].indexOf("Ana") !=-1){
        $("#item" + i).addClass("ana");
      }
      //bastion
      if(endresults[i].indexOf("Bastion") !=-1){
        $("#item" + i).addClass("bastion");
      }
      //dva
      if(endresults[i].indexOf("D.Va") !=-1){
        $("#item" + i).addClass("dva");
      }
      //genji
      if(endresults[i].indexOf("Genji") !=-1){
        $("#item" + i).addClass("genji");
      }
      //hanzo
      if(endresults[i].indexOf("Hanzo") !=-1){
        $("#item" + i).addClass("hanzo");
      }
      //junkrat
      if(endresults[i].indexOf("Junkrat") !=-1){
        $("#item" + i).addClass("junkrat");
      }
      //lucio
      if(endresults[i].indexOf("Lucio") !=-1){
        $("#item" + i).addClass("lucio");
      }
      //McCree
      if(endresults[i].indexOf("McCree") !=-1){
        $("#item" + i).addClass("mccree");
      }
      //Reaper
      if(endresults[i].indexOf("Reaper") !=-1){
        $("#item" + i).addClass("reaper");
      }
      //Mei
      if(endresults[i].indexOf("Mei") !=-1){
        $("#item" + i).addClass("mei");
      }
      //Mercy
      if(endresults[i].indexOf("Mercy") !=-1){
        $("#item" + i).addClass("mercy");
      }
      //Pharah
      if(endresults[i].indexOf("Pharah") !=-1){
        $("#item" + i).addClass("pharah");
      }
      //Reinhardt
      if(endresults[i].indexOf("Reinhardt") !=-1){
        $("#item" + i).addClass("reinhardt");
      }
      //Roadhog
      if(endresults[i].indexOf("Roadhog") !=-1){
        $("#item" + i).addClass("roadhog");
      }
      //Solider76
      if(endresults[i].indexOf("Soldier: 76") !=-1){
        $("#item" + i).addClass("soldier");
      }
      //Symmetra
      if(endresults[i].indexOf("Symmetra") !=-1){
        $("#item" + i).addClass("symmetra");
      }
      //Torbjorn
      if(endresults[i].indexOf("Torbjorn") !=-1){
        $("#item" + i).addClass("torbjorn");
      }
      //Tracer
      if(endresults[i].indexOf("Tracer") !=-1){
        $("#item" + i).addClass("tracer");
      }
      //Widowmaker
      if(endresults[i].indexOf("Widowmaker") !=-1){
        $("#item" + i).addClass("widowmaker");
      }
      //Winston
      if(endresults[i].indexOf("Winston") !=-1){
        $("#item" + i).addClass("winston");
      }
      //Zarya
      if(endresults[i].indexOf("Zarya") !=-1){
        $("#item" + i).addClass("zarya");
      }
      //Zenyatta
      if(endresults[i].indexOf("Zenyatta") !=-1){
        $("#item" + i).addClass("zenyatta");
      }
  
    }
    isRunning = false;
  }
  
  function shakeBox(){
    $("#box").addClass("shakebox");
    setTimeout(removeShake,820);
  }
  
  function removeShake(){
    $("#box").removeClass("shakebox");
    setTimeout(shakeBox,1820);
  }
  </code></pre>
  
  <p><a href="https://pastebin.com/ut8zJ7HX" rel="nofollow noreferrer">CSS</a></p>
  
  <p><strong><em>If you need any more files just ask! I haven't shown animate.css, chance.js, loot.js or spec-loot.js</em></strong></p>