Change diacritics color with javascript in html/PHP

I am using the following script to remove the diacritics from text, and I was wondering if there is a way to color the diacritics in html or PHP instead of removing them (the example is in Arabic, but the same applies to Hebrew, French, even English.. etc.).

Javascript code:

$(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');
    });

});
    

Running demo: http://jsfiddle.net/8jAL8/29/

Input: لاَ تَتَعَجَّبُواٌ مِنْ هذَا:

Example of the needed output:

There is an option to do that in Microsoft Word, or LibreOffice, and also I found something here but the first answer needs a fixed text to work, and the second answer just colorizes the whole upper part of the text.

Answer

First, to remove the 8 Arabic tashkeel from an Arabic text, you can do that with the following short line:

const removeTashkel = s => s.replace(/[u064B-u0652]/gm,'');

you can then use the function like this:

console.log(removeTashkel("بِسْمِ اللهِ الرَّحْمنِ الرَّحِيْمِ"));

For the 2nd part of your questions, here is a short function to colourize the Arabic diacritics (tashkeel symbols “harakat”).

There are eight (8) basic Arabic tashkeel symbols, namely:

U+064B  ً Tanwīn Fatiḥ تنوين بالفتح
U+064C  ٌ Tanwīn Ḍamm تنوين بالضم
U+064D  ٍ Tanwīn Kasr تنوين بالكسر
U+064E  َ Fatḥah الفتحة
U+064F  ُ Ḍammah الضمة
U+0650  ِ Kasrah الكسرة
U+0651  ّ Shaddah الشدة
U+0652  ْ Sukūn السكون

To have each tashkeel symbol (diacritic) has its own colour, call the function with your Arabic text as follows:

let my colouredText = colorizeTashkeel("لاَ تَتَعَجَّبُواٌ مِنْ هذَا");

// then insert it in your html <div> with:

document.getElementById("your_Div_id").innerHTML = colouredText ;

If you want all tashkeel symbols (diacritics) to have the same colour, then pass the html colour name as the second parameter to the function as follows:

let my colouredText = colorizeTashkeel("لاَ تَتَعَجَّبُواٌ مِنْ هذَا", "red");

// then insert it in your html <div> with:

document.getElementById("your_Div_id").innerHTML = colouredText ;

Here is the function with working examples.

You can change the eight (8) colour names used for the 8 diacritics symbols on the 2nd line of the function.

In the three (3) examples below; the first one is with different colours, the 2nd is with blue colour, and the 3rd with red colour.

// example

let myText = colorizeTashkeel("بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ")       +'<br><br>'+
         colorizeTashkeel("لاَ تَتَعَجَّبُواٌ مِنْ هذَا","blue")   +'<br><br>'+
         colorizeTashkeel("ثَلَاثُمِائَةٍ وَأرْبَعَةٌ وَثَلَاثُونَ","red");

document.getElementById("myText").innerHTML = myText;

//=========================================================
function colorizeTashkeel(string, oneColor="") {
let result="",colorTable = ['red','blue','green','DarkOrange','aqua','magenta','BlueViolet','Brown']; // 8 colors for 8 tashkeel vowels
[...string].forEach(char => result += (/[u064B-u0652]/.test(char)) ? '<span style="color:' + (oneColor ? oneColor : colorTable[char.charCodeAt() - 1611]) + '">&#8203' + char + '</span>' : char);
return result;
};
//=========================================================

<div id="myText" style="font-size: 40px; font-weight: bold;">