JSFiddle - React, Tailwind, and code Playground

HTML

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

<br /><br />

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

JavaScript

$(document).ready(function(){
       
            var bodyText = $('#page_content').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();
            
            $('#page_content').html(newBodyText);
            $('#actionDiacritics').html('Show');
            }, function() {
            $('#page_content').html(bodyText);
            $('#actionDiacritics').html('Hide');
            });

        });