<main id="content">
  <p>This sentence is short. This is a longer sentence, with more than 5 words. This is a much longer sentence than the first two with more than 8 words and should be colored red</p>
</main>
@mixin highlight($color){
  background:$color;
  padding:3px 6px;
  line-height:30px;
}

.short{
  @include highlight(#bcff70);
}

.medium{
  @include highlight(#fff659);
}

.long{
  @include highlight(#ff7777);
}
View Compiled
//Reconstructs a single sentence
function sentence(singleSentence){
  this.wordCount = singleSentence.match(new RegExp(". .", "g")).length+1;
  
  /**
  * Let's grab the color
  **/
  let sizes = {"long":14,"medium":8,"short":5};
  for(let size in sizes){
    if(this.wordCount >= sizes[size]){
      this.size = size;
      break;
    }
    else if(size === "short"){
      this.size = size;
    }
  }

  this.text = '<span class="'+ this.size +'">' + singleSentence + '. </span>';
}

//Grabs sentences from paragraph
function getContent(element){
  this.element = element;
  this.text = this.element.text();
  let sentences = this.text.split(". ");
  this.sentences = [];
  for(let i=0; i < sentences.length; i++){
    let currentSentence = sentences[i];
    this.sentences[i] = new sentence(currentSentence);
  }
}

$(document).ready(function(){
  let content = new getContent($("#content p"));
  let colorCodedContent = '';
  for(let i=0; i < content.sentences.length; i++){
    colorCodedContent += content.sentences[i].text;
  }
  $("#content p").html(colorCodedContent);
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js