JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<p class="readAloud">
  Here's a test.
</p>

CSS

#word1 {color: red;}
#word2 {color: blue;}
#word3 {color: cyan;}

JavaScript

var items = document.getElementsByClassName('readAloud');

var idCntr = 1, item;
for (var i = 0, len = items.length; i < len; i++) {
    item = items[i];
    item.innerHTML = item.innerHTML.replace(/[^\s]+/g, function(match) {
        return('<span id="word' + idCntr++ + '">' + match + '</span>');
    });
    alert(item.innerHTML);
}