JSFiddle - React, Tailwind, and code Playground
HTML
<p id="textSection">الَلَهُم صَلِ عَلى مُحَمّد و آل مُحمد</p>
<button id="highlight" onclick="highlight();">Highlight</button>
CSS
.highlighted {
background-color:yellow;
}
JavaScript
function stripDiacritics(rawString) {
return rawString.replace(/ُ|ِ|َ|ٍ|ً|ّ/g,"");
}
function highlight() {
var textblock = document.getElementById('textSection').innerHTML;
var words = textblock.split(' ');
var resultText = '';
for (var i=0; i < words.length; i++) {
var strippedWord = stripDiacritics(words[i]);
if (strippedWord == 'محمد') {
resultText += ' <span class="highlighted">'+words[i]+'</span>';
}
else {
resultText += ' '+words[i];
}
}
document.getElementById('textSection').innerHTML = resultText;
}