JSFiddle - React, Tailwind, and code Playground

HTML

<div class="coloriser">In pellentesque convallis lorem, vitae suscipit metus porta posuere. Mauris sed mauris tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean consectetur eros ! eu urna laoreet cursus ut nec arcu. Etiam iaculis, tortor ut vulputate viverra, ligula risus fringilla tellus, non tristique ! augue dui ut metus. Sed ut gravida tortor. Proin imperdiet ornare diam, sit amet aliquam turpis ! Maecenas purus arcu, vehicula vel consequat tempor, mollis quis massa. ! Phasellus ultrici ! es, turpis id malesuada elementum, dui massa suscipit urna, quis vestibulum lacus tellus at nisl. Quisque semper sapien leo. Phasellus sagittis malesuada egestas. Cras neque dui, consequat eget varius vitae, pellentesque sed dui. Proin lorem nulla, gravida ac gravida ac, euismod at lacus. Nunc in nibh sed sapien suscipit volutpat ac viverra nunc. Pellentesque molestie inte ! rdum convallis. Mauris porta vehicula lobortis. Phasellus eu odio id urna cursus cursus. Nulla porta quis lectus quis consectetur. Morbi porta ultrices nibh, in ullamcorper turpis tempor a. Proin commodo hendrerit commodo. Aenea ! n elementum suscipit dapibus. Donec consectetur laoreet pulvinar. Aliquam erat volutpat.
</div>

CSS

.rouge { color: red; font-weight: 700;}

JavaScript

var text = document.querySelector(".coloriser");
text.innerHTML = text.innerHTML.replace(/(!)/g, "<span class=rouge>$1</span>");