JSFiddle - React, Tailwind, and code Playground

HTML

<a class="testMe" id="actionDiacritics" style="cursor: pointer;">Highlight</a>

<br /><br />

<span style="font-size: 30pt">
<div id="page_content">
<span id="highlighted_diacritics">
لاَ تَتَعَجَّبُوا مِنْ هذَا
</span>
<span id="unhighlighted_diacritics">
لاَ تَتَعَجَّبُوا مِنْ هذَا
</span>
</div></span>

CSS

#highlighted_diacritics {
    position: absolute;
    z-index:-1;
    color: red;
}

JavaScript

$(document).ready(function(){
       
            var bodyText = $('#unhighlighted_diacritics').html();
            
            function replaceChars()
            {
                newBodyText = bodyText.replace(/َ/gi,'');
                newBodytext = newBodyText.replace(/ً/gi,'');
                newBodyText = newBodyText.replace(/ُ/gi,'');
                newBodyText = newBodyText.replace(/ٌ/gi,'');
                newBodyText = newBodyText.replace(/`/gi,'');
                newBodyText = newBodyText.replace(/ِ/gi,'');
                newBodyText = newBodyText.replace(/ٍ/gi,'');
                newBodyText = newBodyText.replace(/،/gi,'');
                newBodyText = newBodyText.replace(/ْ/gi,'');
                newBodyText = newBodyText.replace(/ّ/gi,'');
            }
            
            
            $('.testMe').toggle(function() {
                             
            replaceChars();
            
            $('#unhighlighted_diacritics').html(newBodyText);
            $('#actionDiacritics').html('Un-highlight');
            }, function() {
            $('#unhighlighted_diacritics').html(bodyText);
            $('#actionDiacritics').html('Highlight');
            });

        });