JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="CA">
Un premier texte
</div>
<div>
Un deuxieme texte
</div>
<div class="CA">
Le troisieme exemple
</div>
</body>

CSS

.consonne{
  color:blue;
}

.voyelle{
  color:red
}

JavaScript

var textes=document.getElementsByClassName("CA");
for(i=0;i<textes.length;i++)
{
  textes[i].innerHTML=textes[i].innerHTML.replace(/([aeiou](?:[aeiou ]*))*([^aeiou](?:[^aeiou]*))*/gi,'<span class="voyelle">$1</span><span class="consonne">$2</span>')

//  var texte= textes[i].innerHTML;
//  console.log("Log 1 : "+texte);
//  var nouveau_texte=texte.replace(/([aeiou](?:[aeiou ]*))*([^aeiou](?:[^aeiou]*))*/gi,'<span class="voyelle">$1</span><span class="consonne">$2</span>')
//	console.log("Log 2 : "+nouveau_texte);
//  textes[i].innerHTML=nouveau_texte;

}