JSFiddle - React, Tailwind, and code Playground

HTML

<div class="something"><p>Should remain</p></div>
<div>Should also remain</div>
<div class="read-aloud"><p>Different Text test.</p></div>
<div><p class="read-aloud">"Here's another test!"</p></div>
<div><p class="read-aloud">“smart-quotes?” Hope they work.</p></div>
<div class="something">Should remain</div>

JavaScript

function add-readAloud-uIDs(matchClass)
    {
    var elems = document.getElementsByTagName('*'),i;
    for (i in elems)
        {
        if((" "+elems[i].className+" ").indexOf(" "+matchClass+" ") > -1)
            {
            elems[i].innerHTML.replace(/\b(“?)("?)([A-Za-z][a-z]*?-?’?'?[a-z]*?\.?,?!?\??)([ | ”])("?)\b/g, '$1$2<span id="word">$3</span>$4$5');
            }
        }
    }

window.onload = function ()
    {
    add-readAloud-uIDs("read-aloud");
    }