I have an unusual request - we want to make all the full stops on the site green in color. We've been trying to wrap each full stop in a span element, but haven't had much success so far. Is this the best approach? Here's what we have attempted:
<div class="container">
<div class="row">
<div class="col txt-col aos-init aos-animate" data-aos="fade-right">
<h2 class="">Test</h2>
<h4>Test content.</h4>
<p>Testing 1 2 3.</p>
</div>
<div class="col image-col aos-init aos-animate" data-aos="fade-left" data-aos-delay="250">
<p>Testing.</p>
</div>
</div>
</div>
$('.container').each(function () {
$(this).text($(this).text().replace(/./g, '<span class="fs-color">.</span>'));
});
Unfortunately, this method is affecting the entire string instead of just the full stops. Does anyone have any suggestions or advice on how to achieve this?
Thank you.